• jQueryEasyUi行编辑打造增删改查

    http://uule.iteye.com/blog/1883067

    jQueryEasyUi行编辑打造增删改查

    博客分类：
     

    问题：

    直接删除后，已删除行下面所有行的Index可能不正确，所以我的解决方法是新增时定义一个当前时间Id，然后每次点击后面的操作按钮时，jQuery获取当前行Id，然后selectRecord获得当前行真实Index

    注意：需为Datagrid定义IdField，否则selectRecord不会起作用，很坑爹的问题...



     

    Java代码  收藏代码
    1. var $obj;  
    2. $(function() {  
    3.     $obj = $("#configQueryGrid");  
    4.     $obj.datagrid({  
    5.         loadMsg : '数据加载中请稍后……',  
    6.         url : root + 'esbService/sysConfigQuery.do',  
    7.         //url : root + 'js/app/sysManagement/sysConfig.json',  
    8.         fitColumns : true,  
    9.         autoRowHeight : true,  
    10.         pagination : true,  
    11.         pagePosition : 'bottom',  
    12.         pageSize : 10,  
    13.         toolbar: '#configTb',  
    14.         pageList : [ 10, 20, 30 ],  
    15.         border : false,  
    16.         singleSelect:true,  
    17.         idField:'id',  
    18.         columns : [ [ {  
    19.                 field : 'id',  
    20.                 title : 'ID',  
    21.                 hidden : true  
    22.             },{  
    23.                 field : 'configName',  
    24.                 title : "标识",  
    25.                 width : 200,  
    26.                 editor : 'text',  
    27.                 sortable : true  
    28.             }, {  
    29.                 field : 'configNameCn',  
    30.                 title : "名称",  
    31.                 editor : 'text',  
    32.                 width : 200,  
    33.                 sortable : true  
    34.             }, {  
    35.                 field : 'configType',  
    36.                 title : "类型",  
    37.                 editor : 'text',  
    38.                 width : 200,  
    39.                 sortable : true  
    40.             }, {  
    41.                 field : 'configValue',  
    42.                 title : "值",  
    43.                 editor : 'text',  
    44.                 width : 200,  
    45.                 sortable : true  
    46.             }, {  
    47.                 field : 'opt',  
    48.                 title : "详情",  
    49.                 width : 150,  
    50.                 align : 'center',  
    51.                 formatter:function(value,row,index){  
    52.                     if (row.editing){  
    53.                         var s = '<a href="#" class="ope-save" onclick="saverow('+index+',this)">保存</a> ';  
    54.                         var c = '<a href="#" class="ope-cancel" onclick="cancelrow('+index+',this)">取消</a>';  
    55.                         return s+c;  
    56.                     } else {  
    57.                         var e = '<a href="#" class="ope-edit" onclick="editrow('+index+',this)">修改</a> ';  
    58.                         var d = '<a href="#" class="ope-remove" onclick="deleterow('+index+',this)">删除</a>';  
    59.                         return e+d;  
    60.                     }  
    61.                 }  
    62.         } ] ],  
    63.         onLoadSuccess : function(data) {  
    64.   
    65.         },  
    66.         onBeforeEdit:function(index,row){  
    67.             row.editing = true;  
    68.             $obj.datagrid('refreshRow', index);  
    69.         },  
    70.         onAfterEdit:function(index,row){  
    71.             row.editing = false;  
    72.             $obj.datagrid('refreshRow', index);  
    73.         },  
    74.         onCancelEdit:function(index,row){  
    75.             row.editing = false;  
    76.             $obj.datagrid('refreshRow', index);  
    77.         }  
    78.     });  
    79.   
    80. });  
    81.   
    82.     function selectCurRow(obj){  
    83.         var $a = $(obj);  
    84.         var $tr = $a.parent().parent().parent();  
    85.         var tmpId = $tr.find("td:eq(0)").text();  
    86.         $obj.datagrid('selectRecord', tmpId);  
    87.     }  
    88.       
    89.     function getIndexAfterDel(){  
    90.         var selected = $obj.datagrid('getSelected');  
    91.         var index = $obj.datagrid('getRowIndex', selected);  
    92.         return index;  
    93.     }  
    94.       
    95.     function editrow(index,obj){  
    96.         selectCurRow(obj);  
    97.           
    98.         var tmpIndex = getIndexAfterDel();    
    99.         $obj.datagrid('beginEdit', tmpIndex);  
    100.     }  
    101.       
    102.     function deleterow(index,obj){  
    103.         $.messager.confirm('Confirm','确认删除?',function(r){  
    104.             if (r){               
    105.                 selectCurRow(obj);  
    106.                 var index = getIndexAfterDel();  
    107.                 var node = $obj.datagrid('getSelected');  
    108.                 var id = node.id;   
    109.                 $.ajax({  
    110.                     url : root + 'esbService/removeSysConfig.do?id='+id,  
    111.                     type : 'GET',                     
    112.                     timeout : 60000,  
    113.                     success : function(data, textStatus, jqXHR) {     
    114.                         var msg = '删除';  
    115.                         if(data == 'pageData') {  
    116.                             $obj.datagrid('deleteRow', index);  
    117.                             return;  
    118.                         }else if (data == "success") {  
    119.                             $obj.datagrid('deleteRow', index);  
    120.                             //$obj.datagrid('reload');  
    121.                             $.messager.alert('提示', msg + '成功！', 'info', function() {  
    122.                                 //window.location.href = root + 'esbService/initSysConfig.do';  
    123.                             });  
    124.                         } else {  
    125.                             $.messager.alert('提示', msg + '失败！', 'error', function() {  
    126.                                 //window.location.href = root + 'esbService/initSysConfig.do';  
    127.                             });  
    128.                         }  
    129.                     }  
    130.                 });   
    131.                   
    132.             }  
    133.         });  
    134.     }  
    135.     function saverow(index,obj){  
    136.         selectCurRow(obj);  
    137.         var tmpIndex = getIndexAfterDel();    
    138.         $obj.datagrid('endEdit', tmpIndex);  
    139.         var node = $obj.datagrid('getSelected');  
    140.         //var data = JSON.stringify(node);  
    141.         var json = {};  
    142.         json.id = node.id;  
    143.         json.configName = node.configName;  
    144.         json.configNameCn = node.configNameCn;  
    145.         json.configType   = node.configType;  
    146.         json.configValue  = node.configValue;  
    147.         $.ajax({  
    148.             url : root + 'esbService/editOrSaveSysConfig.do',  
    149.             type : 'POST',  
    150.             data : json,  
    151.             timeout : 60000,  
    152.             success : function(data, textStatus, jqXHR) {     
    153.                 var msg = '';  
    154.                 if (data == "success") {  
    155.                     $.messager.alert('提示', '保存成功！', 'info', function() {  
    156.                         $obj.datagrid('refreshRow', tmpIndex);  
    157.                     });  
    158.                 } else{  
    159.                     if(data == "illegal"){  
    160.                         msg = "请输入数据！";  
    161.                     }else if(data == "duplicate"){  
    162.                         msg = "该标识已存在！";  
    163.                     }else{  
    164.                         msg = "保存失败！";  
    165.                     }  
    166.                     $.messager.alert('提示', msg , 'error', function() {  
    167.                         $obj.datagrid('beginEdit', tmpIndex);  
    168.                     });  
    169.                 }                     
    170.   
    171.             }  
    172.         });  
    173.           
    174.     }  
    175.     function cancelrow(index,obj){  
    176.         selectCurRow(obj);  
    177.         var tmpIndex = getIndexAfterDel();    
    178.         $obj.datagrid('cancelEdit', tmpIndex);  
    179.     }  
    180.       
    181.     function appendRow(){  
    182.         $obj.datagrid('appendRow',{  
    183.             id: new Date().getTime(),  
    184.             configName: '',  
    185.             configNameCn: "",  
    186.             configType: "",  
    187.             configValue:"",  
    188.             opt:""  
    189.         });  
    190.           
    191.         var length = $obj.datagrid("getRows").length;  
    192.         if(length > 0){  
    193.             editIndex = length - 1;  
    194.         }else{  
    195.             editIndex = 0;  
    196.         }         
    197.         //$obj.datagrid("selectRow", editIndex);  
    198.         $obj.datagrid("beginEdit", editIndex);  
    199.     }  
    200.       
    201.       

     

    Java代码  收藏代码
    1. /* 
    2.      * 全局设置 
    3.      */  
    4.     @RequestMapping(value = "esbService/editOrSaveSysConfig.do", method = RequestMethod.POST)  
    5.     @ResponseBody  
    6.     public String editOrSaveSysConfig(SysConfig sysConfig) {  
    7.         if(sysConfig == null) return null;  
    8.         String message = "";  
    9.         try{  
    10.             message = sysConfigDS.editOrSaveSysConfig(sysConfig);  
    11.         }catch(Exception e){  
    12.             return "fail";  
    13.         }  
    14.           
    15.         return message;  
    16.     }  
    17.       
    18.     @RequestMapping(value = "esbService/removeSysConfig.do", method = RequestMethod.GET)  
    19.     @ResponseBody  
    20.     public String removeSysConfig(@RequestParam Long id) {  
    21.         if(id == null) return null;  
    22.         SysConfig es = sysConfigDS.getSysConfigById(id);  
    23.         String message = "";  
    24.           
    25.         if(null != es){           
    26.             try{  
    27.                 sysConfigDS.remove(id);  
    28.                 message = "success";      
    29.             }catch(Exception e){  
    30.                 return "fail";  
    31.             }  
    32.         }else{  
    33.             message = "pageData";  
    34.         }  
    35.               
    36.         return message;  
    37.     }  

     

    Java代码  收藏代码
    1. public Boolean isIllegalData(SysConfig sys){  
    2.         if(StringUtils.isBlank(sys.getConfigName())  
    3.                 || StringUtils.isBlank(sys.getConfigType())  
    4.                 || StringUtils.isBlank(sys.getConfigValue())){  
    5.             return true;  
    6.         }  
    7.         return false;  
    8.     }  
    9.       
    10.     public Boolean checkSysConfigExist(String name){  
    11.         SysConfig es = getSysConfigByName(name.trim());  
    12.         if(es != null) return true;  
    13.         return false;  
    14.     }  
    15.       
    16.     @Override  
    17.     @Transactional  
    18.     public String editOrSaveSysConfig(SysConfig sysConfig) {  
    19.         SysConfig es = getSysConfigById(sysConfig.getId());  
    20.         String message = "";  
    21.         if(isIllegalData(sysConfig)){  
    22.             message = "illegal";  
    23.         }else{  
    24.             if(null == es){//判断是否新增  
    25.                 if(checkSysConfigExist(sysConfig.getConfigName())){  
    26.                     message = "duplicate";  
    27.                 }else{  
    28.                     sysConfig.setId(null);  
    29.                     save(sysConfig);  
    30.                     message = "success";  
    31.                 }  
    32.             }else{//更新  
    33.                 SysConfig dbEs = getSysConfigByName(sysConfig.getConfigName().trim());  
    34.                 if(checkSysConfigExist(sysConfig.getConfigName())  
    35.                         && es.getId() != dbEs.getId()){  
    36.                     message = "duplicate";  
    37.                 }else{  
    38.                     update(sysConfig);  
    39.                     message = "success";  
    40.                 }  
    41.             }  
    42.         }  
    43.           
    44.         return message;  
    45.     }  

     That's all .

     Jquery easyui 可编辑表格的保存方法
    Java代码  收藏代码
    1. {  
    2.                 id : 'btnsave',  
    3.                 text : '保存',  
    4.                 disabled : true,  
    5.                 iconCls : 'icon-save',  
    6.                 handler : function() {  
    7.                     if (lastEditIndex != undefined) {  
    8.                         $('#tt').datagrid('endEdit', lastEditIndex);  
    9.                     }  
    10.   
    11.                     var insertRows = $('#tt').datagrid('getChanges','inserted');  
    12.                     var updateRows = $('#tt').datagrid('getChanges','updated');  
    13.                     var deleteRows = $('#tt').datagrid('getChanges','deleted');  
    14.                     var changesRows = {  
    15.                             inserted : [],  
    16.                             updated : [],  
    17.                             deleted : [],  
    18.                             };  
    19.         if (insertRows.length>0) {  
    20.             for (var i=0;i<insertRows.length;i++) {  
    21.                 delete insertRows[i].editing;  
    22.                 changesRows.inserted.push(insertRows[i]);  
    23.             }  
    24.         }  
    25.   
    26.         if (updateRows.length>0) {  
    27.             for (var k=0;k<updateRows.length;k++) {  
    28.                 delete updateRows[k].editing;  
    29.                 changesRows.updated.push(updateRows[k]);  
    30.             }  
    31.         }  
    32.           
    33.         if (deleteRows.length>0) {  
    34.             for (var j=0;j<deleteRows.length;j++) {  
    35.                 delete deleteRows[j].editing;  
    36.                 changesRows.deleted.push(deleteRows[j]);  
    37.             }  
    38.         }  
    39.   
    40.                     alert(JSON.stringify(changesRows));  
    41.   
    42.   
    43.                     // 保存成功后，可以刷新页面，也可以：  
    44.                     $('#tt').datagrid('acceptChanges');  
    45.                       
    46.                     // 并且禁止保存、还原按钮  
    47.                     $('#btnsave').linkbutton('disable');  
    48.                     $('#btnreject').linkbutton('disable');  
    49.                 }  
    50.             }  

     JQuery EasyUI datagrid 批量编辑和提交

    参考：

    jquery-easyui 中表格的行编辑功能

    学习Jquery EasyUI的添加，修改，删除，查询等基本操作

    JQueryEasyUI学习笔记（十）datagrid 添加、修改、删除

     jquery-easyui中表格的行编辑功能(javaeye)
     

     jQuery Easyui的datagrid可编辑，多列之间的级联操作

     当Product Id列的值改变的时候，把当前列List Price的值设置成2012.

    Java代码  收藏代码
    1. {  
    2.                     field : 'productid',  
    3.                     title : 'Product ID',  
    4.                     width : 120,  
    5.                     formatter : productFormatter,  
    6.                     editor : {  
    7.                         type : 'combobox',  
    8.                         options : {  
    9.                             valueField : 'productid',  
    10.                             textField : 'name',  
    11.                             data : products,  
    12.                             required : true,  
    13.                             onChange : function (newValue, oldValue) {  
    14.                 //重点在此处   
    15.                 //先获取到当前选中行  
    16.                 //根据当前行获取，当前行的下标  
    17.                 //在根据下标和要获取列的filed获取对应filed的Editor对象  
    18.                 //然后在根据对应的Editor操作  
    19.                                 var row = $dg.datagrid('getSelected');  
    20.                                 var rindex = $dg.datagrid('getRowIndex', row);  
    21.                                 var ed = $dg.datagrid('getEditor', {  
    22.                                         index : rindex,  
    23.                                         field : 'listprice'  
    24.                                     });  
    25.                                 $(ed.target).numberbox('setValue', '2012');  
    26.                             }  
    27.                         }  
    28.                     }  

     。。
  • 相关阅读:
    URAL 2067 Friends and Berries (推理，数学)
    URAL 2070 Interesting Numbers (找规律)
    URAL 2073 Log Files (模拟)
    URAL 2069 Hard Rock (最短路)
    URAL 2068 Game of Nuts (博弈)
    URAL 2066 Simple Expression (水题，暴力)
    URAL 2065 Different Sums (找规律)
    UVa 1640 The Counting Problem (数学，区间计数)
    UVa 1630 Folding (区间DP)
    UVa 1629 Cake slicing (记忆化搜索)
  • 原文地址：https://www.cnblogs.com/wdcwy/p/4989837.html
Copyright © 2020-2023  润新知