easyUI treegrid 分級資料展示

2021-10-01 09:01:43 字數 1930 閱讀 9848

專案中需要分級展示資料，所以就用到了easyui的treegrid。

成品如下圖所示：

圖中1為查詢資料的型別，2為資料名稱，3為根據1和2得出的資料（用treegrid展示）。

圖一是easyui的combobox，沒什麼說的，寫死就行。

圖二也是combobox，但是資料時動態生成的，根據使用者輸入的文字。

**

1.圖二的combobox

最重要的是實時獲取使用者輸入的文字，keyup事件對用的函式，如下所示：

function searchinput(),


success:function(data)


}}); 


}}
根據使用者輸入的文字，在後台獲取資料，用過ajax返回data,再展示到combobox。

2.treegrid

根據使用者輸入的文字去資料庫或其他地方尋找資料，並平湊成treegrid需要的格式，並返回。這裡最終的是平湊資料格式。為了方便，我自己建立了乙個資料格式的類，這樣比較方便設定資料，new乙個類，並把對應的資料set進去就好了。下面是類的**：

public class treegrid {


private string id;


private string title;


private string nowass;


private string status;


//節點狀態（展開，收縮）


private string state;


private string type;


private string url;


//自定義標記，節點是否展開


private string loadflag;


//下面的子節點集合


private listchildren;


…………下面是get set方法
比如你的資料格式是乙個父節點下面有兩個子節點:如下圖所示：

那麼你需要這樣構建資料：

//這個是父級節點


treegrid topgrid = new treegrid();


topgrid.set***();


topgrid.set***();


listchildrengrid = new arraylist<>();


//子節點1,子節點2


treegrid childrengrid1 = new treegrid();


treegrid childrengrid2 = new treegrid();


childrengrid1.set***();


childrengrid1.set***();


childrengrid2.set***();


childrengrid2.set***();


childrendgrid.add(childrengrid1);


childrendgrid.add(childrengrid2); 


//把子節點集合set到父級節點


topgrid.setchildren(childrengrid);


//這樣，topgrid就是乙個你想要的格式了，對了返回的時候需要把它轉為json哦
這樣就可以完成treegrid的分級展示資料的效果了。

easyui treegrid節點擊擇

easyui treegrid本身不能實現選中父節點子節點全選，必須通過另外的方法來實現，這裡說下如何通過修改節點樣式新增checkbox來實現級聯選擇效果 首先需要格式化節點的樣式 formatter function value,row,index show方法如下 function show ...

EASYUI TREEGRID非同步載入資料實現方法

複製 如下 function 這個是頁面初始化的。看看他的json 複製 如下 標紅的地方是特別有用的，我按照他的這個做法，自己做了乙個，始終是沒有資料的，後來發現了乙個問題，複製 如下 上面這個資料 沒有乙個根節點，所以頁面出來什麼都沒有。我的資料只有parentid這個玩意，所以頁面一片空白。這...

easyui treegrid移除樹節點出錯

easyui treegrid移除樹節點出錯 2015年12月22日 11 46 02 星期二 一 問題描述 刪除節點後js報錯。二 原因 因為刪除的節點下面包含了其他的父子節點，但使用方法 select treegrid getchildren row.id 獲取的是該節點下的所有節點，並不是該節...