实现layui表格关联x-select显示下拉框

最新推荐文章于 2024-05-24 18:20:04 发布

盒子里的大猫

最新推荐文章于 2024-05-24 18:20:04 发布

阅读量980

点赞数 9

分类专栏：前端文章标签： layui 前端 javascript

本文链接：https://blog.csdn.net/weixin_45146163/article/details/134731441

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

实现layui表格关联x-select显示下拉框：

实现代码如下：


<html>
<div class="layui-field-box ">
    <table class="layui-hide layui-table" id="demoTable"
           lay-filter="demoTable"></table>
</div>
</html>

<script type="text/html" id="data1Tpl">
    <div id="data1{{d.id}}" name="data1" class="data1Class" ></div>
</script>

<script type="text/html" id="data2Tpl">
    <div id="data2{{d.id}}" name="data2" class="data2Class" ></div>
</script>

<script data-th-inline="none" type="text/javascript">
layui.use(['jquery','table', 'xmSelect'], function () {
    var $ = layui.jquery,
        table = layui.table,
		xmSelect = layui.xmSelect,
        tableIns;
		
loadDemoTable();
function loadDemoTable() {

	let data =[[{data1Value:'data1',},{data2:'data2'}]]
    table.render({
        elem: '#demoTable',
        id: 'demoTable',
        data: data,
        page: false,
        even: true,
        cols: [[ 
            {field: 'data1', title: '数据1', templet: '#data1Tpl'},
            {field: 'data2', title: '数据2', templet: '#data2Tpl'}
        ]],
        none: "无数据",
        done: function (res, curr, count) {
            let tableView = this.elem.next();

            for (let i = 0; i < res.data.length; i++) {
                let selectData = res.data[i];
                requestSelect(selectData.id, res.data);
				
                //初始化数据回显
                if (selectData.data1 !== "") {
                    data1Select.setValue([
                        {name: selectData.data1Name, value: selectData.data1},
                    ])
                }
                if (selectData.data2 !== "") {
                    data2Select.setValue([
                        {name: selectData.data2Name, value: selectData.data1},
                    ])
                }
            }
			
			//表格下拉框显示
            tableView.find(".layui-table-body, .layui-table-box, .layui-table-cell").css('overflow', 'visible');


        }
    })

}

//下拉框
    var data1Select;
    var data2Select;
    function requestSelect(selectId, objData ) {

		//下拉选择内容
		 let selectData = [{name: '张三', value: 1},{name: '李四', value: 2},{name: '王五', value: 3}];
         data1Select = xmSelect.render({
            el: '#data1' + selectId,
            filterable: true,
            radio: true,//单选
            paging: true,//分页
            filterMethod: function (val, item, index, prop) {
			//搜索
                if (val == item.value) {//把value相同的搜索出来
                    return true;
                }
                if (item.name.indexOf(val) != -1) {//模糊匹配
                    return true;
                }
                return false;
            },
            data: selectData,
            on: function (data) {

                var arr = data.arr;
                if (arr.length > 0) {
                    for (let i = 0; i < objData.length; i++) {
                        let _data = objData[i]
                        if (selectId == _data.id) {
						//选中赋值
                            _data.data1 = arr[0].value;
                            _data.data1Name = arr[0].name;
                            break;
                        }
                    }
					//重载表格
                    table.reload('demoTable', {
                        data: objData
                    })
                }

            },
        })


         data2Select = xmSelect.render({
            el: '#data2' + selectId,
            filterable: true,
            radio: true,
            paging: true,
            filterMethod: function (val, item, index, prop) {
                if (val == item.value) {
                    return true;
                }
                if (item.name.indexOf(val) != -1) {
                    return true;
                }
                return false;
            },
            data: selectData,
            on: function (data) {
                //arr:  当前多选已选中的数据
                var arr = data.arr;
                //change, 此次选择变化的数据,数组
                var change = data.change;
                //isAdd, 此次操作是新增还是删除
                var isAdd = data.isAdd;
                if (arr.length > 0) {
                    for (let i = 0; i < objData.length; i++) {
                        let _data = objData[i]
                        if (selectId == _data.id) {
                            _data.data2 = arr[0].value;
                            _data.data2Name = arr[0].name;
                            break;
                        }
                    }
                    table.reload('demoTable', {
                        data: objData
                    })
                }

            },
        })
    }
})
</script >