Jquery easyui 批量处理datagrid的数据

最新推荐文章于 2021-08-18 16:09:58 发布

lenovouser

最新推荐文章于 2021-08-18 16:09:58 发布

阅读量1k

点赞数

分类专栏： EasyUI

EasyUI 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

Jquery easyui 批量处理datagrid的数据

最近用JQuery EasyUI做项目时,需要在客户端批量处理数据,根据官方的Demo,使用json传递数据到后台,后台通过接收到的json数据,反序列化成一系列model对象,然而进行增删查改操作.现整理如下:

 
    
  
 
     
   
<html>
<head>
   <meta name="viewport" content="width=device-width" />
   <title>Index</title>
   <link href="~/themes/Easyui/default/easyui.css" rel="stylesheet" />
   <link href="~/themes/Easyui/icon.css" rel="stylesheet" />
   <script src="~/scripts/jquery-1.9.1.min.js"></script>
   <script src="~/scripts/jquery.easyui.min.js"></script>
   <script src="~/scripts/easyui-lang-zh_CN.js"></script>
   <script type="text/javascript">
       var editIndex = undefined;
       $(function () {
           bindData();
           bindAddButton();
           bindDelButton();
           bindSaveButton();
       });

     
       function bindData() {
           $('#dg').datagrid({
               title: '部门管理',
               url: '/Home/GetBranch',
               pagination: true,
               singleSelect: true,
               rownumbers: true,
               pageNumber: 1,
               height: 420,
               pageSize: 10,
               onClickRow: onClickRow,
               pageList: [10, 15, 20, 25, 30],
               columns: [[
                   { field: 'ID', title: 'ID', hidden: true },
                   { field: 'BrcName', title: '部门名称' ,editor:"text"},
                   { field: 'BrcComment', title: '备注', editor: "text" }
               ]],
               toolbar: '#tb'
           });
       }

       //编辑状态
       function endEditing() {
           if (editIndex == undefined) { return true }
           if ($('#dg').datagrid('validateRow', editIndex)) {
               var ed = $('#dg').datagrid('getEditor', { index: editIndex, field: 'productid' });
               $('#dg').datagrid('endEdit', editIndex);
               editIndex = undefined;
               return true;
           } else {
               return false;
           }
       }

       //单击某行进行编辑
       function onClickRow(index) {
           if (editIndex != index) {
               if (endEditing()) {
                   $('#dg').datagrid('selectRow', index)
                           .datagrid('beginEdit', index);
                   editIndex = index;
               } else {
                   $('#dg').datagrid('selectRow', editIndex);
               }
           }
       }

       //添加一行
       function append() {
           if (endEditing()) {
               $('#dg').datagrid('appendRow', {  });
               editIndex = $('#dg').datagrid('getRows').length - 1;
               $('#dg').datagrid('selectRow', editIndex)
                       .datagrid('beginEdit', editIndex);
           }
       }
       //删除一行
       function remove() {
           if (editIndex == undefined) { return }
           $('#dg').datagrid('cancelEdit', editIndex)
                   .datagrid('deleteRow', editIndex);
           editIndex = undefined;
       }
       //撤销编辑
       function reject() {
           $('#dg').datagrid('rejectChanges');
           editIndex = undefined;
       }

       //获得编辑后的数据,并提交到后台
       function saveChanges() {
           if (endEditing()) {
               var $dg = $('#dg');
               var rows = $dg.datagrid('getChanges');
               if (rows.length) {
                   var inserted = $dg.datagrid('getChanges', "inserted");
                   var deleted = $dg.datagrid('getChanges', "deleted");
                   var updated = $dg.datagrid('getChanges', "updated");
                   var effectRow = new Object();
                   if (inserted.length) {
                       effectRow["inserted"] = JSON.stringify(inserted);
                   }
                   if (deleted.length) {
                       effectRow["deleted"] = JSON.stringify(deleted);
                   }
                   if (updated.length) {
                       effectRow["updated"] = JSON.stringify(updated);
                   }
               }
           }
           $.post("/Home/Commit", effectRow, function (rsp) {
               if (rsp) {
                   $dg.datagrid('acceptChanges');
                   bindData();
               }
           }, "JSON").error(function () {
               $.messager.alert("提示", "提交错误了！");
           });

       }

       function bindSaveButton() {
           $("#saveButton").click(function () {
               saveChanges();
           });
       }
       function bindAddButton() {
           $("#addButton").click(function () {
               append();
               });
       }
       function bindDelButton() {
           $("#delButton").click(function () {
               remove();
           });
       }
   </script>
</head>
<body>
   <table id="dg">
   </table>
   <div id="tb">
       <a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" id="addButton">新增</a>
       <a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" id="delButton">删除</a>
       <a href="javascript:void(0);" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-save'" id="saveButton">保存</a>
   </div>
</body>
</html> 
     
   
 
    
  

 
    
  
 
     
   
       public ActionResult Commit() {
           string deleted = Request.Form["deleted"];
           string inserted = Request.Form["inserted"];
           string updated = Request.Form["updated"];
           if (deleted != null)
           {
               //把json字符串转换成对象
               List<Model.Branch> listDeleted = JsonDeserialize<List<Branch>>(deleted);
               //下面就可以根据转换后的对象进行相应的操作了
           }

           if (inserted != null)
           {
               //把json字符串转换成对象
               List<Model.Branch> listInserted = JsonDeserialize<List<Model.Branch>>(inserted);
               //下面就可以根据转换后的对象进行相应的操作了
           }

           if (updated != null)
           {
               //把json字符串转换成对象
               List<Branch> listUpdated = JsonDeserialize<List<Branch>>(updated);
               //
           } 
     
   
 
    
  

 
       private T JsonDeserialize<T>(string jsonString)
       {
      
           DataContractJsonSerializer ser = new DataContractJsonSerializer(typeof(T));
           MemoryStream ms = new MemoryStream(Encoding.UTF8.GetBytes(jsonString));
           T obj = (T)ser.ReadObject(ms);
           return obj;
       }

lenovouser

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Jquery easyui 批量处理datagrid的数据

Jquery easyui 批量处理datagrid的数据最近用JQuery EasyUI做项目时,需要在客户端批量处理数据,根据官方的Demo,使用json传递数据到后台,后台通过接收到的json数据,反序列化成一系列model对象,然而进行增删查改操作.现整理如下: 1 2 3 4 Index 5
复制链接

扫一扫