1. 程式人生 > >extjs6 非同步樹

extjs6 非同步樹

store定義:

Ext.define('permissionStore', {
    extend: 'Ext.data.TreeStore',
    defaultRootId: ' ',
    autoLoad:true,
    model: 'permissionModel',
    parentIdProperty: 'FartherId',
    nodeParam: 'id',
    sorters: [{ property: 'OrderNumber', direction: 'ASC' }],
    proxy: {
        type: 'ajax'
, url: '/frame/ListPermission', actionMethods: { read: 'post' }, reader: { rootProperty: 'rows', totalProperty: 'total' } } });

defaultRootId: ’ ‘,是很重要的配置,用來初始化向後臺傳遞的引數,即頁面啟動時向後臺發起的查詢引數。
nodeParam: ‘id’,是定義引數名,

後臺程式碼:

public JsonResult ListPermission(string Id)
        {
            string fartherId = Id.Trim
(); fartherId = fartherId == "0" ? null : fartherId; DataTable dt = new PermissionImpl().GetList(fartherId); dt.Columns.Add("iconCls"); foreach(DataRow dr in dt.Rows) { dr["iconCls"] = dr["icon"]; } dt.Columns
.RemoveAt(dt.Columns.IndexOf("icon")); return Json(Common.DataGrid(dt)); }

因為資料庫中儲存的icon中的值是css樣式定義,而extjs中的icon屬性是url包含,所以將返回中的icon去掉,加入了iconCls,這樣可以的樹中顯示圖示。