D7QUANTAI/BookingWeb/Views/User/AccountList.cshtml

@{
    ViewBag.Title = "AccountList";
}
<div class="ibox-content">
    <div class="row row-lg">
        <div class="bootstrap-table col-sm-12">
            <div id="toolbar">
                <div class="form-inline" role="form">
                    <a id="btnAdd" class="btn btn-primary"><i class="fa fa-plus"></i>@Resources.LangSubAccount.BtnAdd</a>
                </div>
            </div>
            <table id="table"
                   data-toggle="table"
                   data-toolbar="#toolbar"
                   data-show-refresh="false"
                   data-show-toggle="false"
                   data-show-columns="false"
                   data-url="@Url.Action("AccountList")"
                   data-pagination="true"
                   data-side-pagination="server"
                   data-total-field="Total"
                   data-data-field="Data"
                   data-page-number="1"
                   data-page-size="15"
                   data-sortable="true"
                   data-sort-class="table-active"
                   data-silent-sort="false"
                   data-method="post">
                <thead>
                    <tr>
                        <th data-field="NAME" data-sortable="true">@Resources.LangSubAccount.ColTitleName</th>
                        <th data-field="TEL" data-sortable="true">@Resources.LangSubAccount.ColTitleTel</th>
                        <th data-field="MOBILE" data-sortable="true">@Resources.LangSubAccount.ColTitleMobile</th>
                        <th data-field="EMAIL" data-sortable="true">@Resources.LangSubAccount.ColTitleEmail</th>
                        <th data-field="STATUS" data-sortable="true">@Resources.LangSubAccount.ColTitleStatus</th>
                        <th data-field="GID" data-formatter="operateFmt">@Resources.LangSubAccount.ColTitleOperation</th>
                    </tr>
                </thead>
            </table>

        </div>
    </div>

    <div class="modal fade bs-example-modal-lg" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="editLabel">@Resources.LangSubAccount.TextAddAccount</h4>
                </div>
                <div class="modal-body" id="editModelBody">
                    <form class="form-horizontal" id="editForm">
                        <input type="hidden" name="gid" />
                        <div class="form-group">
                            @*<label class="col-sm-2 control-label">@Resources.LangSubAccount.TextName</label>*@
                            <label class="col-sm-2 control-label">*@Resources.LangSubAccount.TextName</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" placeholder="设置姓名" name="name">
                            </div>
                        </div>
                        <div class="form-group">
                            @*<label class="col-sm-2 control-label">@Resources.LangSubAccount.TextTel</label>*@
                            <label class="col-sm-2 control-label">@Resources.LangSubAccount.TextTel</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" placeholder="设置电话" name="tel">
                            </div>
                        </div>
                        <div class="form-group">
                            @*<label class="col-sm-2 control-label">@Resources.LangSubAccount.TextMobile</label>*@
                            <label class="col-sm-2 control-label">*@Resources.LangSubAccount.TextMobile</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" placeholder="设置手机" name="mobile">
                            </div>
                        </div>
                        <div class="form-group">
                            @*<label class="col-sm-2 control-label">@Resources.LangSubAccount.TextEmail</label>*@
                            <label class="col-sm-2 control-label">*@Resources.LangSubAccount.TextEmail</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" placeholder="设置邮箱" name="email">
                            </div>
                        </div>
                        <div class="form-group" id="modelIptGroupPwd">
                            @*<label class="col-sm-2 control-label">@Resources.LangSubAccount.TextPassword</label>*@
                            <label class="col-sm-2 control-label">*@Resources.LangSubAccount.TextPassword</label>
                            <div class="col-sm-8">
                                <input type="password" class="form-control" placeholder="设置密码" name="password">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">@Resources.LangAll.BtnClose</button>
                    <button type="button" class="btn btn-primary" id="btnModelSave">@Resources.LangAll.BtnSave</button>
                </div>
            </div>
        </div>
    </div>

</div>
@section styles
{
    <link type="text/css" rel="stylesheet" href="~/Content/hplus/js/plugins/bootstrap-table/bootstrap-table.min.css" />
    <link type="text/css" rel="stylesheet" href="~/Content/css/accountList.css" />
}

@section scripts
{
    <script src="~/Content/hplus/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    @if (ViewContext.RouteData.Values["lang"].ToString().ToLower() == "en")
    {
        <script src="~/Content/hplus/js/plugins/bootstrap-table/locale/bootstrap-table-en-US.min.js"></script>
    }
    else
    {
        <script src="~/Content/hplus/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
    }
    <script src="~/Content/hplus/js/plugins/validate/jquery.validate.min.js"></script>
    <script src="~/Content/js/jquery.form.js"></script>
    <script src="~/Content/js/validatorConfig.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            $('#table').bootstrapTable();

            $("#btnAdd").click(function () {
                showAdd();
            });

            $("#editForm").validate({
                rules: {
                    name: "required",
                    mobile: {
                        required: true,
                        isMobile: true
                    },
                    email: "required",
                    password: "required"
                },
                messages: {
                    name: errIcon + "@Resources.LangSubAccount.ValidInputName",
                    mobile: {
                        required: errIcon + "@Resources.LangSubAccount.ValidInputMobile"
                    },
                    email: errIcon + "@Resources.LangSubAccount.ValidInputEmail",
                    password: errIcon + "@Resources.LangSubAccount.ValidInputPwd"
                }
            });


            $("#btnModelSave").click(function () {
                if ($('#editForm').valid()) {
                    $("#editForm").ajaxSubmit({
                        method:'POST',
                        url: '@Url.Action("AccountSave")',
                        success: function (data) {
                            layer.open({
                                title: '@Resources.LangAll.MsgInfomation',
                                content: data.Message,
                                yes: function (index) {
                                    location.reload();
                                    layer.close(index);
                                }
                            });
                        }
                    });
                }
            });

            jQuery.validator.addMethod("isMobile", function (value, element) {
                var regex = /^1[3-9]{1}\d{9}$/;
                return this.optional(element) || (regex.test(value));
            }, "@Resources.LangAll.ValidInvalidMobile");

        });

        function operateFmt(value, row, index) {
            return [
                '<a href="javascript:void(0);" onclick="showEdit(' + index + ')"><i class=\'fa fa-edit\'></i>@Resources.LangSubAccount.TextEdit</a>'
            ].join('')
        }

        function showAdd() {
            $("#editLabel").html('@Resources.LangSubAccount.TextAddAccount');
            $('#editModal').modal('show');
            $('#editModal input').val("");
            $('#modelIptGroupPwd').show();
        }

        function showEdit(idx) {
            $("#editLabel").html('@Resources.LangSubAccount.TextEditAccount');
            $('#editModal').modal('show');

            var data = $('#table').bootstrapTable('getData')[idx];
            $('#editModal input[name="gid"]').val(data.GID);
            $('#editModal input[name="name"]').val(data.NAME);
            $('#editModal input[name="mobile"]').val(data.MOBILE);
            $('#editModal input[name="tel"]').val(data.TEL);
            $('#editModal input[name="email"]').val(data.EMAIL);
            $('#editModal input[name="password"]').val(data.PASSWORD);
            //$('#modelIptGroupPwd').hide();
        }
    </script>
}