1. 程式人生 > >easyUI——datagrid表格批量操作

easyUI——datagrid表格批量操作

    對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');
            });
        });
後臺delete方法
        [HttpPost]
        public ActionResult Delete(IList<int> idList)
        {
            //判斷判斷是否刪除多行資料
            if (idList.Count >= 1)
            {
                foreach (int i in idList)
                {
                    //新增刪除方法
                }
            }

            return Json(idList);  //這裡返回的還是在前臺選中的資料ID list集合,可以返回其他資料

        }
總結

   對easyUI的擴充套件,當然這種方式也有一定侷限性,比如傳值只能傳單個值,不靈活。後期還會進一步優化。