Layui(table下拉框)

用到的是layui插件，主要是layui插件的table模块。目的是要做到内嵌入select,并且通过select回填相对应的数据。

刚开始为无数据状态，然后添加一行数据，绑定好table内的select所需要的数据

然后是根据修理项目的select选择一个选项，通过这样回填其他数据（维修性质不需要回填）

这样的做法，只有添加行与select绑定数据的时候是请求控制器的，其他，所有的数据都是保存在table内。

@* 修理项目下拉框 *@
    

var tabledata; //修理项目==》自定义全局变量

//修理项目==》Table
                tabRepairItem = layuiTable.render({
                    elem: "#tabRepairItem",
                    toolbar: '#toolbarDemo',//工具条
                    defaultToolbar: [],//去除其他工具
                    id: layTableId,//table的ID
                    limit: 100,//不开启分页，最多一百行。分页存在问题
                    edit: true,//可编辑
                    totalRow: true,//总计行
data: [],//设置加载不存在数据
                    //data: [{ RepairItemName:1}],//默认一行数据,修理项目下拉列表默认选中第一个选项，
                    cols: [[
                        { type: 'radio', fixed: 'left' },
                        { type: "numbers", title: "序号", totalRowText: "合计" },
                        { field: "RepairItemID", title: "修理项目ID", hide: true },
                        {
                            field: "RepairItemName", width: 130, title: "修理项目", templet: '#selectRepairItemName'
                        }, 
                    ]],
                    done: function (res, curr, count) {
                        tabledata = res.data;
                        $.ajax({
                            //修理项目拼接下拉选项
                            type: "post",
                            url: "SelecttabRepairItem",
                            dataType: "json",
                            async: false,
                            success: function (data) {
                                for (k in data) {
                                    $("select[name='RepairItemName']").append('' + data[k].text + '');
                                }
                            }
                        });
                        
                        //根据已有的值回填修理项目下拉框
                        layui.each($("select[name='RepairItemName']", ""), function (index, item) {
                            var elem = $(item);
                            elem.val(elem.data('value'));
                        }); 
                        form.render('select');

                        //计算行的金额
                        var RepairCost = $('.layui-table-main').find("td[data-field='RepairCost']");//根据layuitable的属性来查找到修理费这个单元格 先查找到外面的table属性 再找单元格
                        var Discount = $('.layui-table-main').find("td[data-field='Discount']");//折扣

                        //这里是单价的输入事件 计算小计用的 金额 = 修理费 X 折扣
                        RepairCost.on("input", function (e) {
                            var $cr = $(e.target);
                            var dataindex = $cr.parents('tr').attr("data-index");
                            var Discount = $cr.parents('tr').find("td[data-field='Discount']").children().html();
                            var sub = Discount * e.target.value;
                            $cr.parents('tr').find("td[data-field='ReceiptsSum']").children().html(sub);
                            $.each(tabledata, function (index, value) {
                                if (value.LAY_TABLE_INDEX == dataindex) {
                                    value.ReceiptsSum = sub;
                                }
                            });
                        });
                        Discount.on("input", function (e) {
                            var $cr = $(e.target);
                            var dataindex = $cr.parents('tr').attr("data-index");
                            var RepairCost = $cr.parents('tr').find("td[data-field='RepairCost']").children().html();
                            var sub = RepairCost * e.target.value;
                            $cr.parents('tr').find("td[data-field='ReceiptsSum']").children().html(sub);
                            $.each(tabledata, function (index, value) {
                                if (value.LAY_TABLE_INDEX == dataindex) {
                                    value.ReceiptsSum = sub;
                                }
                            })
                        });

                        var key = 'ReceiptsSum' //列id
                        var a = $("#tabRepairItem").next().find('.layui-table-total').find('td[data-field="' + key + '"] div').text();
                    }
                })

控制器

//修理项目下拉框
        public ActionResult SelecttabRepairItem()
        {
            List A = (from B in myModals.PW_RepairItem
                                select new SelectVo
                                {
                                    id = B.RepairItemID,
                                    text = B.RepairItemName
                                }).ToList();
            //A = Tools.SetSelectJson(A);
            return Json(A, JsonRequestBehavior.AllowGet);
        }

查询某个表绑定select所需要的值