• easyui datagrid 批量编辑和提交数据


    easyui datagrid 行编辑和提交方,废话就不多说了,直接上代码

     1 <div style="margin: 5px;">
     2             <table id="dg" class="easyui-datagrid" title="确认单据" style=" 100%; height: 540px; margin: 20px;"
     3                 data-options="loadMsg: '正在加载,请稍候...',
     4                                   nowrap: false,
     5                                    border: true,
     6                                    methord: 'post',
     7                                    collapsible: false,
     8                                    fit: false,
     9                                    fitColumns: false,
    10                                    remoteSort: true,
    11                                    rownumbers: true, 
    12                                    pagination: true,
    13                                    pageSize: 20,
    14                                    pageList: [20, 30, 40, 50, 100],
    15                                    striped: true, 
    16                                    toolbar: '#tb',
    17                                    onClickRow: onClickRow,
    18                                    singleSelect:false">
    19                 <thead>
    20                     <tr>
    21                        
    22                         <th data-options="field:'obj2',140,align:'center',checkbox:true">物料代码</th>
    23                         <th data-options="field:'obj1',75,display:'none',align:'center'">主键ID</th>
    24                          <th data-options="field:'DJID',70,align:'center'">单据ID</th>
    25                         <th data-options="field:'obj3',240,align:'center'">物料描述</th>
    26                         <th data-options="field:'obj4',75,align:'center'">计划数量</th>
    27                         <th data-options="field:'obj5',75,align:'center'">计划重量</th>
    28                         <th data-options="field:'obj6',80,align:'center'">实际入库数量</th>
    29                         <th data-options="field:'obj7',80,align:'center'">实际入库重量</th>
    30                         <th data-options="field:'obj8',80,align:'center',editor:'text'">入高架库数量</th>
    31                         <th data-options="field:'obj9',80,align:'center',editor:{type:'text'}">入高架库重量</th>
    32                         <th data-options="field:'obj10',80,align:'center',editor:{type:'text'}">入线边库数量</th>
    33                         <th data-options="field:'WorkName',80,align:'center',editor:{type:'text'}">入线边库重量</th>
    34                     </tr>
    35                 </thead>
    36             </table>
    37             <div id="tb" style="height: auto">
    38                 <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="accept()">保存</a>
    39             </div>
    40 
    41         </div>
    界面:


    注意:
    Table的 data-options 属性 onClickRow: onClickRow 属性双击行改变行状态,用于编辑数据
     
    <th data-options="field:'WorkName',80,align:'center',editor:{type:'text'}">入线边库重量</th>
    其中的
    editor:{type:'text'} 属性可以在双击后启用单元格的状态
     1  var editIndex = undefined;
     2     function endEditing(){
     3         if (editIndex == undefined){return true}
     4         if ($('#dg').datagrid('validateRow', editIndex)){
     5             $('#dg').datagrid('endEdit', editIndex);
     6             editIndex = undefined;
     7             return true;
     8         } else {
     9             return false;
    10         }
    11     }
    12     function onClickRow(index){
    13         if (editIndex != index){
    14             if (endEditing()){
    15                 $('#dg').datagrid('selectRow', index)
    16                         .datagrid('beginEdit', index);
    17                 editIndex = index;
    18             } else {
    19                 $('#dg').datagrid('selectRow', editIndex);
    20             }
    21         }
    22     }
    23   
    24     function accept(){
    25         if (endEditing()){
    26             var rows = $('#dg').datagrid('getChanges');
    27             var $dg=$('#dg');
    28             if ($dg.datagrid('getChanges').length) {
    29                // var inserted = $dg.datagrid('getChanges', "inserted"); //获取添加状态的行
    30                // var deleted = $dg.datagrid('getChanges', "deleted");//获取删除状态的行
    31                 var updated = $dg.datagrid('getChanges', "updated");//获取修改状态的行
    32                 var effectRow = new Object();
    33                 if (updated.length) {
    34                     effectRow["updated"] = JSON.stringify(updated);
    35                 }
    36                 $.post("/PFK/ashx/UpdateManger.ashx",effectRow, function(rsp) {
    37                     debugger;
    38                     if(rsp.status){
    39                         $.messager.alert("提示", "提交成功!");
    40                         $dg.datagrid('acceptChanges');
    41                     }
    42                 }, "JSON").error(function() {
    43                    // $.messager.alert("提示", "提交错误了!");
    44                 });
    45             }
    46         }
    47     }

    1  
    2 string updated = context.Request["updated"];
    3         List<ShowCCK_DHModle> modelList = null;
    4         if (updated != "")
    5         {
    6             modelList = RFIDScan.CommFunction.JsonDeserialize<List<ShowCCK_DHModle>>(updated);
    7         }
    8 //获取数据后的其他操作
    
    
  • 相关阅读:
    python 之模块random
    python 迭代器
    python 生成器
    python 装饰器前之闭包和装饰器
    ELK平台搭建(下)
    ELK平台搭建(上)
    kvm 搭建
    python中的浅拷贝与深拷贝
    搭建单机版的FastDFS服务
    ASP.NET MVC Razor语法
  • 原文地址:https://www.cnblogs.com/imeiba/p/5088962.html
Copyright © 2020-2023  润新知