easy UI樹形復選框

首先，展示一下結果

這個是使用easyui的combotree控件來實現的，具體的代碼如下：

1，聲明一個復選框

<select id="rolePer" name="permissionNameList" class="easyui-combotree" style="width:200px;"
                            data-options="url:'/sysPer/getpertree',required:true,checkbox:true,multiple:true"></select>

制定其url的路徑以及獲取的值

2，url獲取的值的格式如下

[{"id":3,"text":"系統管理","children":[{"id":5,"text":"用戶管理","children":[{"id":6,"text":"用戶新增","children":null},{"id":7,"text":"用戶查詢","children":null},{"id":10,"text":"用戶刪除","children":null},{"id":11,"text":"用戶修改","children":null}]},{"id":12,"text":"機構管理","children":[{"id":13,"text":"機構新增","children":null},{"id":14,"text":"機構查詢","children":null},{"id":16,"text":"機構刪除","children":null},{"id":17,"text":"機構修改","children":null}]},{"id":18,"text":"權限管理","children":[]},{"id":19,"text":"角色管理","children":[{"id":21,"text":"新增角色","children":null},{"id":22,"text":"編輯角色","children":null},{"id":23,"text":"修改角色","children":null},{"id":24,"text":"刪除角色","children":null}]},{"id":25,"text":"修改密碼","children":[]}]},{"id":26,"text":"事件管理","children":[]},{"id":27,"text":"設備管理","children":[]}]

3，這些都完成之后，可以根據

var pids = $('#rolePer').combotree('getValues');

來獲取選擇的值

4，在edit的時候，也可以通過

 $('#rolePer').combotree("setValues",row.permissionIdList);

這個來實現。

上面是簡單記錄一下這個控件的使用方法，具體的實現可以參考文檔api，注意，要使用的版本和api的版本要保持一直