EasyUI對treegrid編輯方法簡單介紹

下面是一段EasyUI中編輯treegid的方法的程式碼例項。非常的簡單，比較適合初學者參考學習，程式碼如下:

主從表，從表是一個treegrid，載入完資料後，點選節點進入編輯狀態。

[JavaScript] 純文字檢視 複製程式碼
columns : [ [ {
  title : "ID",
  field : "id",
  hidden : true
}, {
  field : "pid",
  hidden : true
}, {
  title : "AAA",
  field : "aaa",
  width : 70,
  align : "center",
  halign : "center"
}, {
  title : "BBB",
  field : "bbb",
  width : 70,
  align : "center",
  halign : "center",
  editor : {
    type : "combobox",
    options : {
    data : [ {
      "id" : 0,
      "text" : "蘋果"
    }, {
      "id" : 1,
      "text" : "梨子"
    } ],
    valueField : 'id',
    textField : 'text',
    editable : false,
    // required : true,
    panelHeight : "auto",
    missingMessage : "請選擇水果",
    onSelect : function(record) {
      //editingId是進入編輯狀態行的id
      var editors = $('#grid').datagrid('getEditors', $('#editingId').val());
      if(record.id == 1){//選擇梨子
        var feditor = editors[1];//一行中第二個編輯框
        //將編輯框設定成必填
        $(feditor.target).validatebox({required:true});
        //將編輯框設定成可編輯
        $(feditor.target).numberbox('enable');
        var feditor2 = editors[2];//一行中第三個編輯框
        $(feditor2.target).validatebox({required:true});
      }
          else if(record.id == 0){//選擇蘋果
        var feditor = editors[1];
        $(feditor.target).validatebox({required:false});
        $(feditor.target).validatebox("setValue","");
        $(feditor.target).numberbox('disable');
        var feditor2 = editors[2];
        $(feditor2.target).validatebox({required:false});
        $(feditor2.target).validatebox("setValue","");
       }
     },
   }
 }
}]]