jQuery Easy UI + treegrid +複選框

Question

我在我的網站中使用「jQuery Easy UI」。我需要在每個行的複選框的頁面中使用treegrid（與「jQuery Easy UI」 - 樹的證明相同）。

我需要與部件的TreeGrid電網出現同一棵樹，而不是

任何建議是最歡迎....

感謝.. ..

Answer 1

添加下面的代碼讓複選框列到你的樹型表

$(function() { 

columns:[[ 
      {field:'code',title:'Code',width:100,align:'left'}, 
       {field:'name',title:'Name',width:100,align:'right'}, 
       {field:'addr',title:'choose',width:80}, 
       {field:'col4',title:'col4',width: 100, 
        editor: { 
         type: 'checkbox', 
         options: {on: '1', off: '0'} 
        }, 
        formatter: function (value, row) { 
         if (! row.leaf) { 
          if (value == 1) { 
           return '<img src="../resources/image/checked.jpg"/>'; 
          } else { 
           return '<img src="../resources/image/unchecked.jpg"/>'; 
          } 
         } else { 
          return''; 
         } 
        } 
       } 
       ]], 

      //Edit the end of the line, 
      // use click event first perform onAfterEdit event before the event trigger 
      onClickRow: function (row) { 
       var rowIndex = row.id; 
       if (lastIndex != rowIndex) { 
        $('#tablegridJS').treegrid('endEdit', lastIndex); 
       } 
      }, 
      //Line editing, 
      //use double-click event 
      onDblClickRow: function (row) { 
      var rowIndex = row.id; 
       if (lastIndex != rowIndex) { 
        $('#tablegridJS').treegrid('endEdit', lastIndex); 
        $('#tablegridJS').treegrid('beginEdit', rowIndex); 
        lastIndex = rowIndex; 
       } 
      }, 

      OnBeforeEdit: function (row) { 
       console.log(row); 
       beforEditRow(row); // Here are the main steps and code functions 
      }, 

      OnAfterEdit: function (row, changes) { 
       console.log(change); 
       var rowId = row.id; 
        $.ajax ({ 
        url: "saveProductConfig.action", 
        data: row, 
        success: function (text) { 
         $.Messager.alert ('message', 'text', 'info'); 
        } 
       }); 
      }, 
      onClickCell: function(field, row) { 
       if(field=='col4'){ 
        var rowIndex = row.id; 
        if (lastIndex != rowIndex) { 
         $('#tablegridJS').treegrid('endEdit', lastIndex); 
         $('#tablegridJS').treegrid('beginEdit', rowIndex); 
         console.log($('#tablegridJS').treegrid('options')); 
         options = $('#tablegridJS').treegrid('getEditor',{ 
           index:row.id, // pass the editing row id, defined via 'idField' property 
           field:'col4' 
          }); 
         //console.log($(options.target).attr('checked',true)); 
         console.log(options.target); 
         if(options.oldHtml=='<img src="../resources/image/unchecked.jpg">'){ 
          $(options.target).attr('checked',true); 
         }else if(options.oldHtml=='<img src="../resources/image/checked.jpg">'){ 
          $(options.target).attr('checked',false); 
         } 
         lastIndex = rowIndex; 
        } 
       }   
      } 
     }); 

     function beforEditRow (row) { // This is the core, very useful if the same needs, then you can learn to achieve 
      //check box 
      var libraryCoclum = $('#tablegridJS').treegrid('getColumnOption', 'col4'); 


      //checkbox object 
      var checkboxOptionsObj = new Object(); 
      checkboxOptionsObj.on = '1 '; 
      checkboxOptionsObj.off = '0 '; 
      //add checkbox object on edit 
      var checkboxEditorObj = new Object(); 
      checkboxEditorObj.type = 'checkbox'; 
      checkboxEditorObj.options = checkboxOptionsObj; 


      //ckeck whether to make checkbox or combo box editable 
      if (row.leaf) { 
       libraryCoclum.editor = null; 
       typeCoclum.editor = comboboxEditorObj; 
      } else { 
       libraryCoclum.editor = checkboxEditorObj; 
       typeCoclum.editor = null; 
      } 
     } 
     $("#bteasyui").click(function(){ 
      var dataSelected = ""; 
      //$("#tablegridJS").treegrid('selectAll'); 
      nodes = $("#tablegridJS").treegrid('getSelection'); 
      console.log(nodes); 

      $('#tablegridJS').treegrid('beginEdit', nodes.id); 

      dataSelected = $("#tablegridJS").treegrid("check",'01'); 
      console.log($("#tablegridJS").treegrid('getChecked')); 

     }); 
    });