zoukankan      html  css  js  c++  java

  • 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.                     }  

     。。
  • 相关阅读:
    HTML_表单
    HTML_列表、表格与媒体元素
    HTML_HTML5基础
    使用java理解程序逻辑 试题分析
    字符串
    带参数的方法
    人机猜拳
    类的无参方法
    类和对象
    vue cli+axios踩坑记录+拦截器使用，代理跨域proxy（更新）
  • 原文地址：https://www.cnblogs.com/wdcwy/p/4989837.html
Copyright © 2011-2022 走看看