xmSelect下拉框

xmSelect是一个layui的下拉框组件，laytp框架将常用的参数进行了封装

Laytp中渲染xmSelect常用的展示效果

  1. <html>
  2. <body>
  3. <div class="xmSelect"//class="xmSelect"是xmSelect下拉框的标识
  4.     data-name="name"
  5.     data-source="后台路由地址"
  6.     data-radio="true"
  7. ></div>
  8. <script>
  9.     layui.use(['laytp'], function(){
  10.         // 这里写表单元素渲染之后的js代码
  11.     });
  12. </script>
  13. </body>
  14. </html>

参数详情

可以直接查阅laytpForm.js的xmSelect部分代码注释。

参数名 必设 详解
data-name 是 提交表单时的name
data-sourceType 否 默认为data，标注数据类型，data=直接解析数据；route=Ajax请求后台api接口数据
data-source 是 有四种类型，常用的是当data-sourceType=”route”时，此处定义一个后端路由地址
data-params(注意2.1.0将此参数名改成了data-param) 否 Ajax请求后端地址时，需要传递的参数，json字符串，这里要注意，json字符串用单引号包裹才可以
data-sourceTree 否 值为true或者false。是否展示成树形结构，与data-source连用，当为true时，需要展示data-source的值是有children的树形结构的数据
data-strict 否 是否严格父子级，无需设置，值永远是false
data-treeType 否 可选项tree和cascader。cascader为级联模式
data-textField 否 默认为name，当数据源的数据结构是一个数组时，显示的文本字段名称
data-subTextField 否 附属的文本字段名称，仅在下拉框列表中展示，如果返回的数据结果中有对象，比如后台是使用with关联得到的数据，支持使用.号取对象的数据
data-valueField 否 默认为value，当数据源的数据结构是一个数组时，提交表单的值
data-iconField 否 当数据源的数据结构是一个数组时，显示文本前展示的图标字段名
data-radio 否 单选模式，true=开启单选模式，false=关闭单选模式，默认false
data-selected 否 默认选中的数据
data-max 否 多选模式下，最多可选个数，默认不限制
data-placeholder 否 类似placeholder，未选中数据时，提示文字，默认为”请选择”
data-layVerify 否 与layui的lay-verify相同
data-layVerType 否 与layui的lay-verType相同
data-direction 否 下拉方向。up=向上，down=向下
data-paging 否 true或者false。是否开启分页
data-onchange 否 监听选中变化的函数名称，需要自行定义这个函数，此处将函数名填入。 
  1. /**
  2. * xmSelect下拉选择组件
  3. *  - 获取父级窗口xmSelect组件已经选中的值，console.log(parent.xmSelectObj[options.name].getValue());
  4. *  - 获取当前窗口xmSelect组件已经选中的值，console.log(xmSelectObj[options.name].getValue());
  5. * <div class="xmSelect"//class="xmSelect"是xmSelect组件渲染的标识
  6. *      data-name="name"//必设，提交表单时的name
  7. *      data-sourceType="route"//非必设，默认为data，标注数据类型，data=直接解析数据；route=ajax请求后台api接口数据；
  8. *      //必设，data-source支持两种数据结构数组和对象，url类型也可以返回这两种数据结构
  9. *      data-source="[{name:'唱歌',value:'1'},{name:'跳舞',value:'2'},{name:'朗诵',value:'3'},{name:'武术',value:'4'}]"//这种，对应的data-sourceType="data"，不需要指定data-textField和data-valueField，默认使用name的值作为展示的文本，value的值作为表单提交的值
  10. *      data-source="[{text:'唱歌',id:'1'},{text:'跳舞',id:'2'},{text:'朗诵',id:'3'},{text:'武术',id:'4'}]"//这种，对应的data-sourceType="data"，需要指定data-textField="text"，data-valueField="id"
  11. *      data-source="{1:唱歌,2:跳舞,3:朗诵,4:武术}"//这种，对应的data-sourceType="data"，key就是表单提交的值，value就是展示的文本
  12. *      data-source="plugin/core/auth.menu/getTreeList" //这种，对应的data-sourceType="route"，这里是一个Api接口地址，返回的数据结构是数组或者对象，具体请参考当data-sourceType="data"时，data-source的说明
  13. *      data-params='{"is_tree":1,"all_data":1}'//请求后台接口地址时，需要传递的参数，json字符串，这个在自动生成时，不会用到
  14. *      data-sourceTree="true"//非必设，是否展示成树形结构，与data-source连用，当为true时，需要展示data-source的值是树形结构的数据
  15. *      data-strict="false"//树形结构是否严格父子级，当data-sourceTree="true"时有效，可选值是true和false，默认值是，当data-radio="true"时是false，当data-radio="false"时是true
  16. *      data-treeType="tree"//非必设，树形结构展示方式，默认tree，可选项tree和cascader，cascader为级联模式
  17. *      data-textField="name"//非必设，默认为name，当数据源的数据结构是一个数组时，显示的文本字段名称，当数据源数据结构是一个对象时，此设置无意义
  18. *      data-subTextField="value"//非必设，附属的文本字段名称，仅在下拉框列表中展示，如果返回的数据结果中有对象，比如后台是使用with关联得到的数据，支持使用.号取对象的数据
  19. *      data-valueField="value"//非必设，默认为value，当数据源的数据结构是一个数组时，提交表单的值，当数据源数据结构是一个对象时，此设置无意义
  20. *      data-iconField="icon"//非必设，当数据源的数据结构是一个数组时，显示文本前展示的图标字段名，为空或者不设置，则显示文本前无图标，当数据源数据结构是一个对象时，此设置无意义
  21. *      data-radio="true"//非必设，单选模式，true=开启单选模式，false=关闭单选模式，默认false
  22. *      data-selected="1,2"//非必设，默认选中的数据，需要在data中存在，默认不选中任何项
  23. *      data-max="2"//非必设，多选模式下，最多可选个数，默认不限制
  24. *      data-placeholder="请选择****"//非必设，类似placeholder，未选中数据时，提示文字，默认为"请选择"
  25. *      data-layVerify="required"//非必设，与layui的lay-verify相同
  26. *      data-layVerType="tips"//非必设，与layui的lay-verType相同
  27. *      data-direction="up"//非必设，下拉方向，增加这个参数是因为xmSelect没有做成漂浮，在弹出窗最底层有xmSelect时，会影响美观度
  28. *      data-paging="true"//非必设，是否分页，目前仅在data-sourceType="route"时有效，且后台返回的数据结构是使用thinkphp的paginate方法返回的数据结构
  29. *      data-onchange="xmcb"//非必设，监听选中变化的函数名称，类似select元素的onchage事件，这里需要输入的是函数名称字符串，函数的定义方式和参数详解如下：
  30. *          window.xmcb = function(params){
  31. *              console.log(params);
  32. *              //params是一个对象，有arr、change、isAdd三个属性
  33. *              //arr是当前选中项组成的数组，是完成change或者说是click事件后留下的选中项
  34. *              //change是点击下拉框项组成的数组，因为xmSelect支持下拉框分组，树形结构列表，能点击一个按钮选中/取消选中多个项目，所以也是一个数组
  35. *              //isAdd表示change里面的内容是选中，还是取消选中操作
  36. *          }
  37. *          //params输出举例
  38. *          arr: Array(1)
  39. 0: {name: "单行文本输入框", value: "input", __node: {…}}
  40. length: 1
  41. __proto__: Array(0)
  42. change: Array(1)
  43. 0: {name: "文本域", value: "textarea", __node: {…}}
  44. length: 1
  45. __proto__: Array(0)
  46. isAdd: false
  47. __proto__: Object
  48. * ></div>
  49. * @param parentElem
  50. */
  • 评论列表0

Laytp 社区 2021 © laytp.com 出品