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





后台用户管理






$(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 [
                            "  ",
                        ].join("");
                    }else {
                        if (us === 1) {
                            return [
                                "  ",
                            ].join("");
                        } else {
                            return [
                                "  ",
                            ].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> getUserData(){
        String sql = "SELECT * FROM INFO_USER";
        List> maps = jdbcTemplateSec.queryForList(sql);
       //处理数据
        return maps ;
    }
image.png

你可能感兴趣的:(2019-11-02 JS动态生成表格)