easyUI——datagrid表格批量操作

标签：easyui

    对datagrid表格进行批量的操作，是每个系统都会遇到的，通过一下小实例总结一下。其实 原理很简单：获取选中的数据的主键，传值到后台，对数据进行操作。

HTML

    <table id="dg" title="My Users" class="easyui-datagrid" style="width:700px;height:250px"
            url="GetUserData"
            toolbar="#toolbar" pagination="true"
            rownumbers="true" fitColumns="true" singleSelect="false">
        <thead>
            <tr>
                <th data-options="field:'ck',checkbox:true"></th>
                <th field="UserId" width="50">用户ID</th>
                <th field="UserName" width="50">用户名</th>
                <th field="CouserName" width="50">课程名</th>

            </tr>
        </thead>
    </table>
    <div id="toolbar">
        <a href="javascript:void(0)" id="delete" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove User</a>
    </div>

JS函数

    js函数主要是获取选中行的ID，利用ajax将数据传值到后台的delete方法中。

        $("#delete").click(function () {
            //获取表格选择行
            var rows = $('#dg').datagrid('getSelections');

            //判断是否选择行
            if (!rows || rows.length == 0) {
                return;
            }

            var strId;
            //循环ID,添加到idList中
            $.each(rows, function (i, n) {
                if (i == 0) {
                    strId = "idList=" + n.UserId;
                } else {
                    strId += "&idList=" + n.UserId;
                }
            });
            //提交
            $.post('Delete', strId, function (data) { //Delete是后台的方法
                $('#dg').datagrid('reload');
            });
        });

        [HttpPost]
        public ActionResult Delete(IList<int> idList)
        {
            //判断判断是否删除多行数据
            if (idList.Count >= 1)
            {
                foreach (int i in idList)
                {
                    //添加删除方法
                }
            }

            return Json(idList);  //这里返回的还是在前台选中的数据ID list集合，可以返回其他数据

        }

   对easyUI的扩展，当然这种方式也有一定局限性，比如传值只能传单个值，不灵活。后期还会进一步优化。

easyUI——datagrid表格批量操作

标签：easyui

原文地址：http://blog.csdn.net/suneqing/article/details/43344383