组件 layui 常用控件下拉框的应用

2024-05-18 11:51| 来源: 网络整理| 查看: 265

Markdown

下拉框的显示样式：

Markdown

针对下拉框的绑定等操作时，在最后务必调用一次 form.render(); 1、基本定义：

*控件类型

2、Json 数据绑定（以下为 Ajax 成功后的回调函数）：

success: function (result) { console.info("init_parentCategoryList 获取成功，返回的数据为：↓ "); console.info(result); if (result.Status) { result.Data.splice(0, 0, { ItemCode: "", ItemName: "--全部--" }); test.addOption({ selector: '#ddlDataType_searchForm', //选择器 data: result.Data, key: "ItemCode", value: "ItemName", isSelected: false, selectedValue: '', }); form.render(); test.selectMove(); } }

需要预加载 layui.use(['form', 'test'], function () { }); 这两个插件。如果要默认选中某一项，就将 isSelected 设置为 true，同时把 value 值给 selectedValue 属性。

3、onChange 事件. 下拉框需要有 lay-filter 属性：

js 监听：

// 备案大类下拉框 onchange 事件 function onchange_RegistrationCategoryParentId_searchForm() { form.on('select(RegistrationCategoryParentId_searchForm)', function (data) { parentItemCode = data.value; var itemList = $.linq.where(categoryList, function (v) { return v.CategoryCode == parentItemCode; }); itemList.splice(0, 0, { Id: "", FullName: "--全部--" }); test.addOption({ selector: '#RegistrationCategoryId_searchForm', data: itemList, key: "Id", value: "FullName" }); form.render(); test.selectMove(); }); }

'select()'的参数就是对应 lay-filter 属性的值。

获取 value：data.value 获取 text ：$(data.othis[0].innerHTML).find('dd[class=layui-this]').text()

4、取值

取 value：$("#ddlAffectedArea_editForm").val() 取 text：$("#ddlAffectedArea_editForm").parent().find('.layui-anim').find('dd[class=layui-this]').text()

赋值：

$("#ddlAffectedArea_editForm").val(100);

5、禁用

$("#RegistrationCategoryParentId_editForm").attr('disabled', true); form.render();

6、启用

$("#RegistrationCategoryParentId_editForm").attr('disabled', false); 或 $("#RegistrationCategoryParentId_editForm").removeAttr('disabled'); form.render();

【本文地址】

公司简介

联系我们