<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PCGroupManage.aspx.cs" Inherits="SmartLogonServer.PCGroupManage" %>

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <!--必须的css引用-->
    <link href="Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" />
    <link href="Content/bootstrap-table/bootstrap-table.min.css"  rel="stylesheet" />
<!--    <link href="Content/bootstrap-table/extensions/fixed-column/bootstrap-table-fixed-columns.css"  rel="stylesheet" />  -->
    <link href="Content/toastr/toastr.min.css"  rel="stylesheet" />
    
</head>
<body>
    <div class="panel-body" style="padding-bottom:0px;">
      
        <div id="toolbar" class="btn-group">
            <button id="btn_add" type="button" class="btn btn-success">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
            </button>
        </div>
        <table id="tb_cardgroup"></table>
    </div>

    <!--新增或者编辑的弹出框-->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" 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="myModalLabel">操作</h4>
                </div>
            
                <div class="modal-body">

                    <div class="row" style="padding:10px;">
                        <label class="control-label col-xs-2">组名</label>
                        <div class="col-xs-10">
                            <input type="text" name="edtGroupName" class="form-control" placeholder="组名"/>
                        </div>
                    </div>
                   <!-- <div class="row" style="padding:10px;">
                        <label class="control-label col-xs-2">备注</label>
                        <div class="col-xs-10">
                            <input type="text" name="edtGroupMemo" class="form-control" placeholder="备注"/>
                        </div>
                    </div>
                    -->
                        <div class="row" style="padding:10px;">
                        <label class="control-label col-xs-2">管理员</label>
                        <div class="col-xs-10">
     
                        <select name="selectgroup" id="selectgroup" class="form-control">
    
                            </select>

                        </div>
                    </div>
                    <div class="row" style="padding:10px;">
                        <label class="control-label col-xs-2">排序号</label>
                        <div class="col-xs-10">
                            <input type="text" name="edtGroupOder" class="form-control" value="100"/>
                        </div>
                    </div>
                    <input  type="hidden" name="edtID" />
                </div>
                <div class="modal-footer">
 
                    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button>
                    <button type="button" id="sava-edit-btn" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存</button>
                </div>
                
            </div>
        </div>
    </div>

        <!--必须的js文件-->
        <script src="Content/jquery-1.9.1.min.js"></script>
        <script src="Content/bootstrap/js/bootstrap.min.js"></script>
        <script src="Content/bootstrap3-editable/js/bootstrap-editable.js"></script>
        <script src="Content/bootstrap-table/bootstrap-table.min.js"></script>
        <script src="Content/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
        <!-- <script src="Content/bootstrap-table/extensions/fixed-column/bootstrap-table-fixed-columns.js"></script> -->
        
        <script src="Content/bootstrap-table/extensions/editable/bootstrap-table-editable.min.js"></script>
        <script src="Content/toastr/toastr.min.js"></script>
        <script src="Content/sweetalert/sweetalert.min.js"></script>

        <script type="text/javascript">
            //页面加载完成之后


            $(function () {

               //表格的初始化
                $('#tb_cardgroup').bootstrapTable({
                    url: "PCGroup.ashx",                         //直接从本地数据初始化表格
                    method: 'get',                      //请求方式（*）
                    //datatype: "json",
                    //contentType: "application/x-www-form-urlencoded",
                    toolbar: '#toolbar',                //工具按钮用哪个容器
                    idField: 'ID',
                    uniqueId: 'ID',
                    striped: true,                      //是否显示行间隔色
                    cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                    pagination: true,                   //是否显示分页（*）
                    sortable: false,                     //是否启用排序
                    sortOrder: "asc",                   //排序方式
                    queryParams: function (params) {
                        var pages = {
                            limit: params.pageSize, // 每页显示数量
                            offset: params.pageNumber, // SQL语句起始索引

                        }

                        return JSON.stringify(pages);
                    },                                  //传递参数（*）
                    queryParamsType: "",
                    sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                    pageNumber: 1,                      //初始化加载第一页，默认第一页
                    pageSize: 25,                       //每页的记录行数（*）
                    pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                    search: false,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                    strictSearch: true,
                    showColumns: true,                  //是否显示所有的列

                    showRefresh: true,                  //是否显示刷新按钮
                    minimumCountColumns: 2,             //最少允许的列数
                    height: 800,
                    selectItemName: 'parentItem',
                    fixedColumns: true,
                    fixedNumber: 5,
                    showToggle: false,          //是否显示详细视图和列表视图的切换按钮
                    cardView: false,          //是否显示详细视图
                    showExport: true, //是否显示导出按钮
                    exportDataType: "all",
                    exportTypes: ['excel'], //导出文件类型
                    //注册加载子表的事件。注意下这里的三个参数！
                    onExpandRow: function (index, row, $detail) {
                        InitSubTable(index, row, $detail);
                    },
                    columns: [{
                        checkbox: false,
                        width: 20
                    }, {
                        field: 'PCGroupName',
                        title: '组名',
                        width: 200,
                        editable: {
                            type: 'text',
                            title: '组名',
                            validate: function (v) {
                                if (!v) return '组名不能为空';
                            }

                    }

                    }, {
                        field: 'GroupOrder',
                        title: '排序号',
                        width: 200,
                        editable: {
                            type:  'text',
                            title: '排序号',
                            validate: function (v) {
                                if (isNaN(v)) return '排序号必须是数字';
                            }
                        }

                    }, {
                        field: 'GroupMemo',
                        title: '管理员',
                        width: 300
                        //editable: {
                        //    type: 'text',
                        //    title: '备注'
                       // }
                    }, {
                        title: '操作',
                        width: 200,
                        formatter: function (value, row, index) {//这里的三个参数：value表示当前行当前列的值；row表示当前行的数据；index表示当前行的索引（从0开始）。
                            var html = '<button type="button" onclick="editModel(' + row.ID + ')" class="btn btn-primary"><span class="glyphicon glyphicon-pencil" aria- hidden="true" ></span >编辑</button >&nbsp;&nbsp;';
                            if(row.ID!=0)html=html+  '<button type="button" onclick="deleteModel(' + row.ID + ')" class="btn btn-danger"><span class="glyphicon glyphicon-remove" aria- hidden="true" ></span >删除</button >';
                            return html;
                        }
                    }],
                    onEditableSave: function (field, row, oldValue, $el) {
             
                        $.ajax({
                            type: "post",
                            url: "PCGroupEdit.ashx",
                            data: row,
                            dataType: 'JSON',
                            success: function (data, status) {
                                if (data.result == true) {
                                    toastr.success('提交数据成功');
                                }
                            },
                           error: function () {
                               toastr.error('编辑失败');
                            },
                            complete: function () {

                            }

                        });
                    }
                });

                //新增事件
                $("#btn_add").on('click', function () {
                    $('#tb_card').bootstrapTable("resetView");
                    //弹出模态框
                    loadAdmindata("");
                    $("#myModal").modal();
                    //给弹出框里面的各个文本框赋值
                    $("#myModal input").val("");
                    $("#myModal input[name='edtGroupOder']").val("100");
                    $("#myModal input[name='edtID']").val("-1");
                    //$("#myModal input[name='edtAddCardNo']").prop("readonly", false);
                   // $("#myModal button[name='btngetcardno']").prop("style", "display:block;");

                });

            });


            //编辑事件
            var editModel = function (id) {
                //根据当前行的id获取当前的行数据
                var row = $("#tb_cardgroup").bootstrapTable('getRowByUniqueId', id);
                //弹出模态框
                loadAdmindata(row.GroupMemo);
                $("#myModal").modal();
                //给弹出框里面的各个文本框赋值
         

                $("#myModal input[name='edtGroupName']").val(row.PCGroupName);
              //  $("#myModal select[name='selectgroup']").val(row.GroupMemo);
                $("#myModal input[name='edtGroupOder']").val(row.GroupOrder);
                $("#myModal input[name='edtID']").val(row.ID);
            }

            //删除事件
            var deleteModel = function (id) {
                //if (confirm("是否删除当前组?") == true) {
                swal({
                    title: "删除组",
                    text: "是否删除当前组?",
                    icon: "warning",
                    // buttons: true,
                    dangerMode: true,
                    buttons:{
                        cancel: '取消',
                        confirm: {
                            text: '删除',
                            value: 'confirm'
                        }
                    }
                })
    .then((value) => {
        if (value==='confirm') {
                    $.ajax({
                        type: "post",
                        url: "PCGroupEdit.ashx",
                        data: {
                            'Edit': "delete",
                            'id': id

                        },
                        dataType: 'JSON',
                        success: function (data, status) {
                            if (status == "success") {
                                if (data.result == true) {
                                    $("#tb_cardgroup").bootstrapTable("refresh", {
                                        silent: true //静态刷新
                                    });
                                    toastr.success('操作成功');
                                }
                                else {
                                    toastr.error('操作失败');
                                }
                            }
                        },
                        error: function () {
                            toastr.error('操作失败');
                        },
                        complete: function () {

                        }

                    });
            }
            });//then
            }


            $("#sava-edit-btn").click(function () {
                $('#myModal').modal('hide');

                $.ajax({
                    type: "post",
                    url: "PCGroupEdit.ashx",
                    data: {
                        'Edit': $("#myModal input[name='edtID']").val()!='-1',
                        'ID': $("#myModal input[name='edtID']").val(),
                        'PCGroupName': $("#myModal input[name='edtGroupName']").val(),
                        'GroupMemo': $("#myModal select[name='selectgroup']").val(),
                        'GroupOrder': $("#myModal input[name='edtGroupOder']").val(),

                    },
                    dataType: 'JSON',
                    success: function (data, status) {
                        if (status == "success") {
                            if (data.result == true) {
                                $("#tb_cardgroup").bootstrapTable("refresh", {
                                    silent: true //静态刷新
                                });
                                toastr.success('操作成功');
                            }
                            else {
                                toastr.error('操作失败');
                            }
                        }
                    },
                    error: function () {
                        toastr.error('操作失败');
                    },
                    complete: function () {

                    }

                });


            })


            function loadAdmindata(selectval) {
                $.ajax({
                    url: "AdminGroup.ashx",
                    type: 'GET',
                    data: {
                        'edit': 'loadadmin'
                    },
                    async: true,
                    datatype: 'JSON',
                    success: function (data) {
                        if (data) {

                            var groupnames = [];

                            for (var i = 0, len = data.rows.length; i < len; i++) {
                                var groupdata = data.rows[i];
                                //拼接成多个<option><option/>
                                if (selectval == groupdata.UserName)
                                    groupnames.push('<option value="' + groupdata.UserName + '" selected>' + groupdata.UserName + '</option>');
                                else
                                    groupnames.push('<option value="' + groupdata.UserName + '">' + groupdata.UserName + '</option>');
                            }

                            $("#selectgroup").html(groupnames.join(' '));
                        }
                    },
                    error: function () {
                        toastr.error("error");
                    }
                });
            }
            toastr.options.positionClass = 'toast-top-center';
        </script>
</body>
</html>

