美文网首页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