dynamicCondition v3.0.6 插件新增下拉树编辑器

先看下效果:

点击查看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.后台提供数据。即访问上面配置的url,返回指定格式数据。

[{"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":"空调","id":2652,"children":[{"name":"壁挂式空调","open":false,"id":2653},{"name":"柜式空调","open":false,"id":2654},{"name":"中央空调","open":false,"id":2655},{"name":"一级能效空调","open":false,"id":2656},{"name":"变频空调","open":false,"id":2657},{"name":"1.5匹空调","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":"厨卫大电","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":"豆浆机","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":"养生壶","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":"卷/直发器","open":false,"id":2730},{"name":"剃/脱毛器","open":false,"id":2731},{"name":"理发器","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(){
//业务代码....
})

具体可以参考demo页面源码。

其他参考文档:高级查询插件相关文档说明

猜你喜欢

转载自blog.csdn.net/xiaozaq/article/details/90477033