D7QUANTAI/BookingJieFeng/Views/Booking/ColumnConfig.cshtml

@using BookingJieFeng.DB.Model
@{
    var dicAllCol = ViewBag.DicCol;
}

<div class="top-navigation">
    <div class="row">
        <nav class="navbar">
            <div class="navbar-collapse navbar-bottom collapse">
                <ul class="nav navbar-nav orderlist-nav">
                    <li><a id="btnSave"><i></i>保存</a><span></span></li>
                </ul>
            </div>
        </nav>
    </div>
</div>
<div class="wrapper-content J_mainContent gray-bg-right">
    <div class="row row-margin">
        <div class="ibox">
            <div class="ibox-content">
                <div class="panel-body">
                    <table id="tableCfg" class="table">
                        <thead>
                            <tr>
                                <th>是否显示</th>
                                <th>列名</th>
                                <th>排序号</th>
                                <th>宽度</th>
                            </tr>
                        </thead>
                        <tbody id="tbodyCols">
                            @foreach (var item in dicAllCol.Keys)
                            {
                                <tr data-col="@item">
                                    <td><input type="checkbox" name="visible" class="form-control" /> </td>
                                    <td>@dicAllCol[item]</td>
                                    <td><input type="number" name="sort" class="form-control" /></td>
                                    <td><input type="number" name="width" class="form-control" /></td>
                                </tr>
                            }
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@section styles
{
    <link type="text/css" rel="stylesheet" href="~/Content/css/orderlist.css" />
}

@section scripts{
    <script src="~/Content/hplus/js/plugins/validate/jquery.validate.min.js"></script>
    <script src="~/Content/js/validatorConfig.js"></script>
    <script src="~/Content/js/jquery.form.js"></script>
    <script src="~/Content/js/common.js"></script>
    <script>
        var cfgData=@(ViewBag.JsonData==null?"null":Html.Raw( ViewBag.JsonData.ToString()));
        $(function () {
            if (cfgData == null) {
                $("#tbodyCols tr").each(function (i, v) {
                    $(v).find("input:eq(0)").prop("checked", true)
                    $(v).find("input:eq(1)").val((i + 1))
                    $(v).find("input:eq(2)").val(0)
                })
            } else {
                $(cfgData).each(function (i, v) {
                    var tr = $("#tbodyCols tr[data-col='" + v.colName + "']");
                    if (v.visible) {
                        $(tr).find("input:eq(0)").prop("checked", true)
                    }

                    $(tr).find("input:eq(1)").val(v.sort==null?"0":v.sort)
                    $(tr).find("input:eq(2)").val(v.width == null ? "0" : v.width)


                })
            }

            $("#btnSave").click(function () {
                var arr = []
                var hasErr = false;
                $("#tbodyCols tr").each(function (i, v) {
                    var sort = parseInt($(v).find("input:eq(1)").val())
                    var width = parseInt($(v).find("input:eq(2)").val())
                    if (isNaN(sort)) {
                        layer.alert('请填写字段【' + $(v).find("td:eq(1)").html()+'】的排序号')
                        hasErr = true;
                    } else if (isNaN(width)) {
                        layer.alert('请填写字段【' + $(v).find("td:eq(1)").html() + '】的宽度')
                        hasErr = true;
                    }
                    
                    arr.push({
                        colName: $(v).data("col"),
                        visible: $(v).find("input:eq(0)").prop("checked"),
                        sort: sort,
                        width: width
                    })
                })

                if (hasErr) {
                    return
                }

                $.ajax({
                    method: 'POST',
                    url: '@Url.Action("ColumnConfigSave")',
                    data: {
                        module: "@ViewBag.Module",
                        cate: "@ConfigData.CateListColumn",
                        data: JSON.stringify(arr)
                    },
                    success: function (data) {
                        layer.alert(data.Message, function () {
                            if (parent) {
                                parent.location.reload()
                            }
                        })

                    }
                })
            })


        });


    </script>
}