• jQuery-ui treegird 使用

    [javascript] view plaincopyprint?
     
    1. 在实际应用中可能会碰到不同的需求，比如会根据每行不同的参数或属性设置来设置同列不同的editor类型，这时原有的例子就显的有点太过简单，不能实现我们的需求，现在应用我在项目中的操作为例，显示下实现同列不同操作的情况：（在这，我把例子的情况完全整合到了js里面配置实现，如有习惯于js实现方式的也可参考）  
    2.   
    3. html:  
    4.   
    5. <table id="comTypeAndPropertyTree"></table>//个人觉得这样更显的页面清晰，所有的配置都放到js里实现  
    6.   
    7. js:  
    8.   
    9. var types = [  
    10.       {typeId:0,typeName:'Normal'},  
    11.       {typeId:1,typeName:'URL'},  
    12.       {typeId:2,typeName:'Symbol'}  
    13.   ];  
    14.     
    15. $(function(){  
    16.      var lastIndex;  
    17.    $('#comTypeAndPropertyTree').treegrid({  
    18.     title:'产品库配置',  
    19.     height:550,  
    20.     rownumbers: true,  
    21.     animate:true,  
    22.     url:'getComTypeAndPropertyTreeRoot.action',  
    23.     idField:'id',//id=productId_propId_largetypeId_midlletypeId_comtypeId;  
    24.     treeField:'name',  
    25.     frozenColumns:[[  
    26.                  {title:'名称',field:'name',300,  
    27.                   formatter:function(value){  
    28.                    return '<span style="color:red">'+value+'</span>';  
    29.                   }  
    30.                  }  
    31.     ]],  
    32.     columns:[[  
    33.         {title:'library',field:'library',100,editor:{type:'checkbox',options:{on:'1',off:'0'}},  
    34.          formatter:function(value,row){  
    35.          if(!row.leaf){  
    36.           if(value==1){  
    37.             return '<img src="images/checkbox_checked.jpg"/>';  
    38.            }else{  
    39.             return '<img src="images/checkbox_unchecked.jpg"/>';  
    40.            }  
    41.          }else{  
    42.           return '';  
    43.          }  
    44.          }},  
    45.      {title:'显示名称',field:'displayName',100,editor:'text'},  
    46.      {title:'type',field:'type',100,  
    47.       editor:{type:'combobox',options:{valueField:'typeId',textField:'typeName',data:types}},  
    48.          formatter:function(value,row){  
    49.           if(row.leaf){  
    50.            for(var i=0; i<types.length; i++){  
    51.          if (types[i].typeId == value) return types[i].typeName;  
    52.         }  
    53.         return types[0].typeName;  
    54.        }else{  
    55.         return '';  
    56.        }  
    57.                   }  
    58.         },  
    59.      {title:'Expose',field:'expose',100,editor:{type:'checkbox',options:{on:'1',off:'0'}},  
    60.          formatter:function(value,row){  
    61.          if(row.leaf){  
    62.            if(value==1){  
    63.             return '<img src="images/checkbox_checked.jpg"/>';  
    64.            }else{  
    65.             return '<img src="images/checkbox_unchecked.jpg"/>';  
    66.            }  
    67.           }else{  
    68.            return '';  
    69.           }  
    70.          }},  
    71.      {title:'Annotate',field:'annotate',100,editor:{type:'checkbox',options:{on:'1',off:'0'}},  
    72.          formatter:function(value,row){  
    73.           if(row.leaf){  
    74.            if(value==1){  
    75.             return '<img src="images/checkbox_checked.jpg"/>';  
    76.            }else{  
    77.             return '<img src="images/checkbox_unchecked.jpg"/>';  
    78.            }  
    79.           }else{  
    80.            return '';  
    81.           }  
    82.          }  
    83.         },  
    84.      {title:'Load',field:'load',100,editor:{type:'checkbox',options:{on:'1',off:'0'}},  
    85.          formatter:function(value,row){  
    86.           if(row.leaf){  
    87.            if(value==1){  
    88.             return '<img src="images/checkbox_checked.jpg"/>';  
    89.            }else{  
    90.             return '<img src="images/checkbox_unchecked.jpg"/>';  
    91.            }  
    92.           }else{  
    93.            return '';  
    94.           }  
    95.          }  
    96.         },  
    97.      {title:'Name Available',field:'nameAvailable',100,editor:{type:'checkbox',options:{on:'1',off:'0'}},  
    98.          formatter:function(value,row){  
    99.           if(row.leaf){  
    100.            if(value==1){  
    101.             return '<img src="images/checkbox_checked.jpg"/>';  
    102.            }else{  
    103.             return '<img src="images/checkbox_unchecked.jpg"/>';  
    104.            }  
    105.           }else{  
    106.            return '';  
    107.           }  
    108.          }  
    109.         },  
    110.      {title:'Value Available',field:'valueAvailable',100,editor:{type:'checkbox',options:{on:'1',off:'0'}},  
    111.          formatter:function(value,row){  
    112.           if(row.leaf){  
    113.            if(value==1){  
    114.             return '<img src="images/checkbox_checked.jpg"/>';  
    115.            }else{  
    116.             return '<img src="images/checkbox_unchecked.jpg"/>';  
    117.            }  
    118.           }else{  
    119.            return '';  
    120.           }  
    121.          }  
    122.         },  
    123.      {title:'Export As OAT',field:'exportAsOAT',100,editor:{type:'checkbox',options:{on:'1',off:'0'}},  
    124.          formatter:function(value,row){  
    125.           if(row.leaf){  
    126.            if(value==1){  
    127.             return '<img src="images/checkbox_checked.jpg"/>';  
    128.            }else{  
    129.             return '<img src="images/checkbox_unchecked.jpg"/>';  
    130.            }  
    131.           }else{  
    132.            return '';  
    133.           }  
    134.          }  
    135.         },  
    136.      {title:'Required',field:'required',100,editor:{type:'checkbox',options:{on:'1',off:'0'}},  
    137.          formatter:function(value,row){  
    138.           if(row.leaf){  
    139.            if(value==1){  
    140.             return '<img src="images/checkbox_checked.jpg"/>';  
    141.            }else{  
    142.             return '<img src="images/checkbox_unchecked.jpg"/>';  
    143.            }  
    144.           }else{  
    145.            return '';  
    146.           }  
    147.          }  
    148.         },  
    149.      {title:'Units',field:'units',100,editor:'text',  
    150.       formatter:function(value,row){  
    151.        if(row.leaf){  
    152.         return value;  
    153.        }else{  
    154.         return '';  
    155.        }  
    156.       }},  
    157.      {title:'VM',field:'vm',100,editor:'text',  
    158.       formatter:function(value,row){  
    159.        if(row.leaf){  
    160.         return value;  
    161.        }else{  
    162.         return '';  
    163.        }  
    164.       }}  
    165.     ]]  
    166.     ,onClickRow:function(row){//运用单击事件实现一行的编辑结束，在该事件触发前会先执行onAfterEdit事件  
    167.      var rowIndex = row.id;  
    168.      if (lastIndex != rowIndex){  
    169.       $('#comTypeAndPropertyTree').treegrid('endEdit', lastIndex);  
    170.      }  
    171.     }  
    172.     ,onDblClickRow:function(row){//运用双击事件实现对一行的编辑  
    173.      var rowIndex = row.id;  
    174.      if (lastIndex != rowIndex){  
    175.       $('#comTypeAndPropertyTree').treegrid('endEdit', lastIndex);  
    176.       $('#comTypeAndPropertyTree').treegrid('beginEdit', rowIndex);  
    177.       lastIndex = rowIndex;  
    178.      }  
    179.     }  
    180.     ,onBeforeEdit:function(row){  
    181.            beforEditRow(row);//这里是功能实现的主要步骤和代码  
    182.     }  
    183.     ,onAfterEdit:function(row,changes){  
    184.      var rowId = row.id;  
    185.      $.ajax({  
    186.           url:"saveProductConfig.action" ,  
    187.           data: row,  
    188.           success: function(text){  
    189.          $.messager.alert('提示信息',text,'info');    
    190.           }  
    191.         });  
    192.     }  
    193.    });  
    194.   });  
    195.   function beforEditRow(row){//这个是核心的，很有用的，如有同样需求的话可以借鉴实现  
    196.       var libraryCoclum = $('#comTypeAndPropertyTree').treegrid('getColumnOption','library');  
    197.          var exposeCoclum = $('#comTypeAndPropertyTree').treegrid('getColumnOption','expose');  
    198.          var annotateCoclum = $('#comTypeAndPropertyTree').treegrid('getColumnOption','annotate');  
    199.          var loadCoclum = $('#comTypeAndPropertyTree').treegrid('getColumnOption','load');  
    200.          var nameAvailableCoclum = $('#comTypeAndPropertyTree').treegrid('getColumnOption','nameAvailable');  
    201.          var valueAvailableCoclum = $('#comTypeAndPropertyTree').treegrid('getColumnOption','valueAvailable');  
    202.          var exportAsOATCoclum = $('#comTypeAndPropertyTree').treegrid('getColumnOption','exportAsOAT');  
    203.          var requiredCoclum = $('#comTypeAndPropertyTree').treegrid('getColumnOption','required');  
    204.           
    205.          var unitsCoclum = $('#comTypeAndPropertyTree').treegrid('getColumnOption','units');  
    206.          var vmCoclum = $('#comTypeAndPropertyTree').treegrid('getColumnOption','vm');  
    207.           
    208.           var typeCoclum = $('#comTypeAndPropertyTree').treegrid('getColumnOption','type');  
    209.           
    210.          var checkboxOptionsObj = new Object();  
    211.     checkboxOptionsObj.on='1';  
    212.     checkboxOptionsObj.off='0';  
    213.       var checkboxEditorObj = new Object();  
    214.     checkboxEditorObj.type='checkbox';  
    215.     checkboxEditorObj.options=checkboxOptionsObj;  
    216.       
    217.    var comboboxOptionsObj = new Object();  
    218.     comboboxOptionsObj.valueField='typeId';  
    219.     comboboxOptionsObj.textField='typeName';  
    220.     comboboxOptionsObj.data=types;  
    221.    var comboboxEditorObj = new Object();  
    222.     comboboxEditorObj.type='combobox';  
    223.     comboboxEditorObj.options=comboboxOptionsObj;  
    224.    if(row.leaf){  
    225.     libraryCoclum.editor=null;  
    226.     exposeCoclum.editor=checkboxEditorObj;  
    227.     annotateCoclum.editor=checkboxEditorObj;  
    228.     loadCoclum.editor=checkboxEditorObj;  
    229.     nameAvailableCoclum.editor=checkboxEditorObj;  
    230.     valueAvailableCoclum.editor=checkboxEditorObj;  
    231.     exportAsOATCoclum.editor=checkboxEditorObj;  
    232.     requiredCoclum.editor=checkboxEditorObj;  
    233.       
    234.     unitsCoclum.editor='text';  
    235.     vmCoclum.editor='text';  
    236.       
    237.     typeCoclum.editor=comboboxEditorObj;  
    238.    }else{  
    239.     libraryCoclum.editor=checkboxEditorObj;  
    240.     exposeCoclum.editor=null;  
    241.     annotateCoclum.editor=null;  
    242.     loadCoclum.editor=null;  
    243.     nameAvailableCoclum.editor=null;  
    244.     valueAvailableCoclum.editor=null;  
    245.     exportAsOATCoclum.editor=null;  
    246.     requiredCoclum.editor=null;  
    247.       
    248.     unitsCoclum.editor=null;  
    249.     vmCoclum.editor=null;  
    250.       
    251.     typeCoclum.editor=null;  
    252.    }  
    253.     }  
    254.   
    255. 实现效果图：实现流程：onDblClickRow --（ onBeforeEdit -- onAfterEdit） -- onClickRow，操作上只需要双击和单击两个事件来完成操作，而另两个事件是在中间自动实现完成。  
  • 相关阅读:
    离散数学概论
    Linux内核分析
    程序的本质
    常见bug分析
    java编程思想--学习心得
    领域特定语言--心得
    Linux下网卡配置
    ubuntu下安装python的gevent模块遇到的一个问题
    二分图的最小点覆盖和最大独立集
    win7通过ssh远程登录mininet虚拟机,运行wireshark并通过x11在宿主机显示图形界面
  • 原文地址：https://www.cnblogs.com/MonaSong/p/5104752.html
Copyright © 2020-2023  润新知