layui table表格之单元格固定项目下拉框

表格的单元格值入下拉框的两种形式

第一种: 直接render数据时写入

<table id="demoTable" lay-filter="demoTableFilter"></table>
<script>
  layui.use(['table', 'jquery', 'form'], function () {
        var table = layui.table;
        var form = layui.form;
        var $ = layui.jquery;
        var tableObject;
        //第一个实例
        tableObject = table.render({
            elem: '#demoTable'
            , height: 500
            , url: 'http://localhost:8080/findAll' //数据接口
            //, page: true //开启分页
            , method: 'post'  //提交方式 get/post
            , toolbar: true    //开启表头工具栏
            , cols: [[ //表头
                {field: 'name', title: '名称',align:'center'}
                //, {field: 'citycode', title: '号码',templet:'#citycodeTpl'} //模板式
                , {field: 'citycode', title: '号码',templet:function(d){
                        return '<select name="citycode" name="citycode" lay-filter="citycode" id="citycode" lay-verify="required">\n' +
                            '        <option value=""></option>\n' +
                            '        <option value="1001">北京</option>\n' +
                            '        <option value="1000">上海</option>\n' +
                         
                            '      </select>';
                    },align:'center'}
                , {field: 'dataDesc', title: '保存',templet:function (d) {
                    return '  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">保存</button>';

                    },align:'center'}

            ]]
            ,done: function (res, curr, count) {
                //数据渲染完的回调。
                /*
                //第三种方式,动态填
                res.data.forEach(function (item, index) {//根据已有的值回填下拉框
                                layui.each($("select[name='citycode']", ""), function (index, item) {
                                    var elem = $(item);
                                    elem.next().children().children()[0].defaultValue = elem.data('value');
                                    //elem.val(elem.data('value'));
                                });
                                table.render('select');
                */
                //由于layui 设置了超出隐藏，所以这里改变下，以兼容操作按钮的下拉菜单
                $(".layui-table-body, .layui-table-box, .layui-table-cell").css('overflow', 'visible'); }


        });
    })
    <script>

第二种:套用模板

<table id="demoTable" lay-filter="demoTableFilter"></table>
<script type="text/html" id="citycodeTpl" >
        <select name="citycode" lay-filter="citycode" id="citycode"  data-value = {{d.citycode}} >
            <option value="1001">北京</option>
            <option value="1000">上海</option>
        </select>
</script>

监听表单

layui.use('form', function () {
            var form = layui.form;
            //监听下拉框编辑
            form.on('select(citycode)', function (data) {
                //获取当前行tr对象
                var elem = data.othis.parents('tr');
                //第一列的值是Guid，取guid来判断
                var Guid= elem.first().find('td').eq(1).text();
                //选择的select对象值；
                var selectValue = data.value;
                //这里的JsonDataInti是我自定义的table中数据的缓存数据，下拉数据修改时赋值到这一行缓存数据
                for (i = 0; i < jsonDataInit.length; i++) {
                    if (jsonDataInit[i].Guid == Guid) {
                        jsonDataInit[i].citycode = selectValue; //更新被修改的行数据
                    }
                }
            })
        });

自行测试吧