美文网首页H5、CSS、JS
2019-11-02 JS动态生成表格

2019-11-02 JS动态生成表格

作者: 忆丶往 | 来源:发表于2019-11-18 10:56 被阅读0次
    <link rel="stylesheet" th:href="@{bootstrap/css/bootstrap.min.css}" href="/static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" th:href="@{bootstraptable/bootstrap-table.css}" href="/static/bootstraptable/bootstrap-table.css">
    <link rel="stylesheet" th:href="@{css/userManage.css}" href="/static/css/userManage.css"/>
    
    
    <div class="main-table">
                    <div class="main-title h3" style="padding-bottom: 12px;">
                        <span>后台用户管理</span>
                    </div>
                    <table id="user-table"></table>
    </div>
    
    
    <script th:src="@{js/lib/jquery-2.2.3.min.js}" src="/static/js/lib/jquery-2.2.3.min.js"></script>
    <script th:src='@{js/lib/layer/layer.js}'></script>
    <script th:src="@{bootstrap/js/bootstrap.js}" src="/static/bootstrap/js/bootstrap.js"></script>
    <script th:src="@{bootstraptable/bootstrap-table.js}" src="/static/bootstraptable/bootstrap-table.js"></script>
    <script th:src="@{bootstraptable/bootstrap-table-zh-CN.js}"
            src="/static/bootstraptable/bootstrap-table-zh-CN.js"></script>
    <script th:src="@{js/userManage.js}" src="/static/js/userManage.js"></script>
    
    $(function () {
        userTable.initTable();
    })
    
    var userTable = {
    
        initTable: function () {
    
            var self = this;
            var $table = $("#user-table");
            $table.width($table.parent().width() - 2);
            var mainColumns = [
                [
                    {
                        field: "userCode",
                        title: "用户编码",
                        valign: "middle",
                        align: "center",
                        sortable: true,
                        colspan: 1,
                        rowspan: 1
                    }, {
                    field: "userName",
                    title: "用户名",
                    valign: "middle",
                    align: "center",
                    colspan: 1,
                    rowspan: 1
                }, {
                    field: "password",
                    title: "用户密码",
                    valign: "middle",
                    align: "center",
                    colspan: 1,
                    rowspan: 1
                }, {
                    field: "cellphone",
                    title: "手机号",
                    valign: "middle",
                    align: "center",
                    colspan: 1,
                    rowspan: 1
                }, {
                    field: "department",
                    title: "单位名称",
                    valign: "middle",
                    align: "center",
                    sortable: true,
                    colspan: 1,
                    rowspan: 1
                }, {
                    field: "province",
                    title: "省份",
                    valign: "middle",
                    align: "center",
                    colspan: 1,
                    rowspan: 1
                }, {
                    field: "city",
                    title: "城市",
                    valign: "middle",
                    align: "center",
                    colspan: 1,
                    rowspan: 1
                }, {
                    field: "createDate",
                    title: "创建时间",
                    valign: "middle",
                    align: "center",
                    sortable: true,
                    colspan: 1,
                    rowspan: 1
                }, {
                    field: "loginDate",
                    title: "最近登录时间",
                    valign: "middle",
                    align: "center",
                    sortable: true,
                    colspan: 1,
                    rowspan: 1
                }, {
                    field: "loginTimes",
                    title: "登录次数",
                    valign: "middle",
                    align: "center",
                    sortable: true,
                    colspan: 1,
                    rowspan: 1
                }, {
                    field: "userState",
                    title: "用户状态",
                    valign: "middle",
                    align: "center",
                    formatter: function (value, row, index) {
                        var isManager = row.isManager;
                        var us = row.userState;
                        if (isManager === 1){
                            return [
                                "<button type='button' class='TaskTableEditor btn btn-xs' disabled='false';>已激活</button>&nbsp;&nbsp;",
                            ].join("");
                        }else {
                            if (us === 1) {
                                return [
                                    "<button type='button' class='TaskTableEditor btn btn-success btn-xs'>已激活</button>&nbsp;&nbsp;",
                                ].join("");
                            } else {
                                return [
                                    "<button type='button' class='TaskTableEditor btn btn-danger btn-xs'>未激活</button>&nbsp;&nbsp;",
                                ].join("");
                            }
                        }
                    },
                    events: self.changeUserState,
                    colspan: 1,
                    rowspan: 1
                },
                    //     {
                    //     field: 'operation',
                    //     align: 'center',
                    //     title: '操作',
                    //     formatter: self._tableOperation,
                    //     // events: self._tableOperationEvents,
                    //     colspan: 1,
                    //     rowspan: 1
                    // }
                ]
            ];
    
            $table.bootstrapTable('destroy').bootstrapTable({
                url: "userManage/getUserData",
                striped: true,
                // toolbar: '#selectDate',
                // toolbarAlign: 'right',
                columns: mainColumns,
                singleselect: true,  //单选
                pagination: true,
                pageSize: 10,
                pageList: [5, 10, 20, 50],
                // showRefresh: true,
                data: []
            });
        },
    
        changeUserState: {
            /*改变用户状态*/
            "click .TaskTableEditor": function (e, value, row, index) {
                var self = this;
                var userState = row.userState;
    
                var params = {
                    userID: row.userCode,
                }
    
                if (userState === 1) {
                    params.state = 0;
                } else {
                    params.state = 1;
                }
                $.get("userManage/changeUserState", params, function (data) {
                    if (data === 1) {
                        layer.msg("修改成功");
                        window.location.reload();
                    } else {
                        layer.msg("修改失败");
                    }
                })
            }
        },
    
    }
    
        @ResponseBody
        @RequestMapping("/getUserData")
        public List<Map<String,Object>> getUserData(){
            String sql = "SELECT * FROM INFO_USER";
            List<Map<String, Object>> maps = jdbcTemplateSec.queryForList(sql);
           //处理数据
            return maps ;
        }
    
    image.png

    相关文章

      网友评论

        本文标题:2019-11-02 JS动态生成表格

        本文链接:https://www.haomeiwen.com/subject/plocbctx.html