先看下效果：

點擊查看demo頁面

使用步驟：

1.編輯html頁面。

<ul id="dynamicCondition" style="display:none;"><li field="DynamicCondition.id" title="id" edit="text" layVerify="number"></li><li field="DynamicCondition.logicDel" title="是否有效" ops="equal" edit="editorRadio" layVerify=""></li><li field="DynamicCondition.name" title="姓名" ops="equal,like,end" edit="text" layVerify=""></li><li field="DynamicCondition.sex" title="性別" edit="select" layVerify="number" templet="#dict-sex"></li><li field="DynamicCondition.birthday" title="生日" edit="date" layVerify=""></li><li field="DynamicCondition.phone" title="手機號碼" edit="text" layVerify=""></li><li field="DynamicCondition.email" title="郵箱" edit="text" layVerify=""></li><li field="DynamicCondition.province" title="省份" ops="equal" edit="selectProvince" templet="#dict-province" layVerify="" allowDel="false"></li><li field="DynamicCondition.city" title="城市" ops="equal" edit="selectCity" templet="#dict-city" layVerify="" allowDel="false"></li><li field="DynamicCondition.goodsClassifyId" title="商品分類" ops="equal" edit="goodsClassifyTree" layVerify="" ></li><li field="goodsClassifyId" title="下拉樹" ops="equal" edit="treeSelect" placeholder="下拉樹插件" layVerify=""url="xpl/demo/dynamicCondition/treeSelect"></li></ul>

主要看最后一個li標簽配置edit="treeSelect"與url="xpl/demo/dynamicCondition/treeSelect"

2.后臺提供數(shù)據(jù)。即訪問上面配置的url，返回指定格式數(shù)據(jù)。

[{"name":"家用電器","id":2643,"children":[{"name":"電視","id":2644,"children":[{"name":"曲面電視","open":false,"id":2645},{"name":"超薄電視","open":false,"id":2646},{"name":"OLED電視","open":false,"id":2647},{"name":"4K超清電視","open":false,"id":2648},{"name":"55英寸","open":false,"id":2649},{"name":"65英寸","open":false,"id":2650},{"name":"電視配件","open":false,"id":2651}],"open":false},{"name":"空調(diào)","id":2652,"children":[{"name":"壁掛式空調(diào)","open":false,"id":2653},{"name":"柜式空調(diào)","open":false,"id":2654},{"name":"中央空調(diào)","open":false,"id":2655},{"name":"一級能效空調(diào)","open":false,"id":2656},{"name":"變頻空調(diào)","open":false,"id":2657},{"name":"1.5匹空調(diào)","open":false,"id":2658},{"name":"以舊換新","open":false,"id":2659}],"open":false},{"name":"洗衣機","id":2660,"children":[{"name":"滾筒洗衣機","open":false,"id":2661},{"name":"洗烘一體機","open":false,"id":2662},{"name":"波輪洗衣機","open":false,"id":2663},{"name":"迷你洗衣機","open":false,"id":2664},{"name":"烘干機","open":false,"id":2665},{"name":"洗衣機配件","open":false,"id":2666}],"open":false},{"name":"冰箱","id":2667,"children":[{"name":"多門","open":false,"id":2668},{"name":"對開門","open":false,"id":2669},{"name":"三門","open":false,"id":2670},{"name":"雙門","open":false,"id":2671},{"name":"冷柜/冰吧","open":false,"id":2672},{"name":"酒柜","open":false,"id":2673},{"name":"冰箱配件","open":false,"id":2674}],"open":false},{"name":"廚衛(wèi)大電","id":2675,"children":[{"name":"油煙機","open":false,"id":2676},{"name":"燃氣灶","open":false,"id":2677},{"name":"煙灶套裝","open":false,"id":2678},{"name":"集成灶","open":false,"id":2679},{"name":"消毒柜","open":false,"id":2680},{"name":"洗碗機","open":false,"id":2681},{"name":"電熱水器","open":false,"id":2682},{"name":"燃氣熱水器","open":false,"id":2683},{"name":"嵌入式廚電","open":false,"id":2684}],"open":false},{"name":"廚房小電","id":2685,"children":[{"name":"破壁機","open":false,"id":2686},{"name":"電烤箱","open":false,"id":2687},{"name":"電飯煲","open":false,"id":2688},{"name":"電壓力鍋","open":false,"id":2689},{"name":"電燉鍋","open":false,"id":2690},{"name":"豆?jié){機","open":false,"id":2691},{"name":"料理機","open":false,"id":2692},{"name":"咖啡機","open":false,"id":2693},{"name":"電餅鐺","open":false,"id":2694},{"name":"榨汁機/原汁機","open":false,"id":2695},{"name":"電水壺/熱水瓶","open":false,"id":2696},{"name":"微波爐","open":false,"id":2697},{"name":"多用途鍋","open":false,"id":2698},{"name":"養(yǎng)生壺","open":false,"id":2699},{"name":"電磁爐","open":false,"id":2700},{"name":"面包機","open":false,"id":2701},{"name":"空氣炸鍋","open":false,"id":2702},{"name":"面條機","open":false,"id":2703},{"name":"電陶爐","open":false,"id":2704},{"name":"煮蛋器","open":false,"id":2705},{"name":"電燒烤爐","open":false,"id":2706}],"open":false},{"name":"生活電器","id":2707,"children":[{"name":"取暖電器","open":false,"id":2708},{"name":"吸塵器/除螨儀","open":false,"id":2709},{"name":"空氣凈化器","open":false,"id":2710},{"name":"掃地機器人","open":false,"id":2711},{"name":"蒸汽拖把/拖地機","open":false,"id":2712},{"name":"干衣機","open":false,"id":2713},{"name":"電話機","open":false,"id":2714},{"name":"飲水機","open":false,"id":2715},{"name":"凈水器","open":false,"id":2716},{"name":"除濕機","open":false,"id":2717},{"name":"掛燙機/熨斗","open":false,"id":2718},{"name":"加濕器","open":false,"id":2719},{"name":"電風扇","open":false,"id":2720},{"name":"冷風扇","open":false,"id":2721},{"name":"毛球修剪器","open":false,"id":2722},{"name":"生活電器配件","open":false,"id":2723}],"open":false},{"name":"個護健康","id":2724,"children":[{"name":"剃須刀","open":false,"id":2725},{"name":"電動牙刷","open":false,"id":2726},{"name":"電吹風","open":false,"id":2727},{"name":"按摩器","open":false,"id":2728},{"name":"健康秤","open":false,"id":2729},{"name":"卷/直發(fā)器","open":false,"id":2730},{"name":"剃/脫毛器","open":false,"id":2731},{"name":"理發(fā)器","open":false,"id":2732},{"name":"足浴盆","open":false,"id":2733},{"name":"足療機","open":false,"id":2734},{"name":"美容器","open":false,"id":2735},{"name":"潔面儀","open":false,"id":2736},{"name":"按摩椅","open":false,"id":2737}],"open":false},{"name":"家庭影音","id":2738,"children":[{"name":"家庭影院","open":false,"id":2739},{"name":"KTV音響","open":false,"id":2740},{"name":"迷你音響","open":false,"id":2741},{"name":"DVD","open":false,"id":2742},{"name":"功放","open":false,"id":2743},{"name":"回音壁","open":false,"id":2744},{"name":"影音配件","open":false,"id":2745}],"open":false}],"open":false}]

3.引入相關組件。必須引入dynamicCondition組件與treeSelect組件才能正常使用。

因為集成了layui 第三方組件treeSelect(查看treeSelect組件說明)，所以需要引入該組件。例如：

layui.config({base: '/static/layui-extend/' //設定擴展的Layui模塊的所在目錄，一般用于外部模塊擴展 }).extend({dynamicCondition: 'dynamicCondition/dynamicCondition',treeSelect: 'treeSelect/treeSelect' }).use(['table','form','dynamicCondition','treeSelect'], function(){ //業(yè)務代碼.... })

具體可以參考demo頁面源碼。

其他參考文檔：高級查詢插件相關文檔說明

?

?

總結

以上是生活随笔為你收集整理的dynamicCondition v3.0.6 插件新增下拉树编辑器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。