ZUI + SSM框架下数据表格的使用

最新推荐文章于 2023-10-01 00:05:36 发布

原创最新推荐文章于 2023-10-01 00:05:36 发布 · 3.3k 阅读

6 ·

CC 4.0 BY-SA版权

java 同时被 3 个专栏收录

28 篇文章

订阅专栏

java web

26 篇文章

订阅专栏

Html5

24 篇文章

订阅专栏

本文详细介绍使用ZUI框架下的datagrid组件实现数据加载、关键字搜索、字段排序、全选等功能的过程，涵盖前端代码配置与后端SSM框架交互，附带具体代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

完成一个小项目，后端为SSM框架，前端使用了ZUI框架，下面记录了如何使用zui框架下的datagrid组件来实现传统页面下

1.加载数据

2.关键字搜索

3.按照字段排序

4.全选

常用功能的实现，整个过程实现不复杂。为了方便以后直接使用和参考，和其他使用相同或类似技术开发人员直接上手，将整个过程记录下来。

首先实现的页面效果如下：

Demo前期的准备：

本实例使用了account数据表，sql脚本如下：

-- 创建账号表
drop table if exists account;
create table account(
	id int primary key auto_increment,
	account char(100),
	pwd char(200),
	type smallint, -- 0:学生 1:导师
	sts smallint, -- 0:初始状态 1:审核通过 2:审核不通过
	registtime datetime
);

搭建SSM框架之类了就不说了，然后在需要开发的页面上引入ZUI关于数据库表格2的css和js文件。官方文档：http://zui.sexy/#view/datagrid

下面是html页面上的内容：

<div class="container">
    <div class="row">
        <div class="col-md-5">
            <div class="input-group">
                <div class="input-control search-box  has-icon-left has-icon-right search-example"
                     id="searchbox">
                    <input id="inputSearch3" type="search" class="form-control search-input"
                           placeholder="搜索">
                    <label for="inputSearchExample3" class="input-control-icon-left search-icon"><i
                            class="icon icon-search"></i></label>
                </div>
                <span class="input-group-btn">
                                <button class="btn btn-primary" id="search_result" type="button">搜索</button>
                            </span>
            </div>
        </div>
        <div class="col-md-7">
            <button class="btn btn-danger pull-right" id="getselected">获取选中</button>
        </div>
    </div>
</div>

<div id="myDataGrid" class="datagrid datagrid-striped" style="margin-top:20px;">
    <div class="datagrid-container table-responsive"></div>
    <div class="pager"></div>
</div>

上面的结构应该容易明白页面的结构，然后，接着我们通过配置前端datagrid来达到目的，js的代码如下：

 $(function () {

        $("#myDataGrid").datagrid({
            dataSource: {
                cols: [
                    {
                        name: 'id',
                        label: '编号',
                        className: 'text-center',
                        sort: true,
                    },
                    {
                        name: 'account',
                        label: '账号',
                        className: 'text-center',
                        sort: true,
                    },
                    {
                        name: 'pwd',
                        label: '密码',
                        className: 'text-center',
                        sort: true,
                    },
                    {
                        name: 'sts',
                        label: "状态",
                        className: 'text-center',
                        sort: true,
                    },
                    {
                        name: 'registtime',
                        label: '注册时间',
                        valueType: 'date',
                        className: 'text-center',
                        sort: true,
                    },
                    {
                        label: '操作',
                        html: true,
                        sort: false,
                        className: 'text-center',
                        // 值转换器仅仅影响当前列
                        valueOperator: {
                            getter: function (dataValue, cell, dataGrid) {
                                var id = cell.config.data.id;
                                return "<button class='btn btn-danger btn-sm' onclick='console.log(" + id + ")'><i class='icon icon-trash'></i>删除</button>&nbsp;&nbsp;" +
                                    "<button class='btn btn-success btn-sm' onclick='console.log(" + id + ")'><i class='icon icon-search'></i>查看</button>";
                            }
                        }
                    }
                ],
                remote: function (params) {
                    return {
                        // 远程地址
                        url: '/test/getaccount',
                        // 请求类型
                        type: 'POST',
                        // 数据类型
                        dataType: 'json'
                    }
                }
            },
            sortable: true, // 可排序
            checkable: true, // 可选择
            checkByClickRow: false,
            states: {
                pager: { // 分页
                    page: 1,
                    recPerPage: 10
                },
                fixedLeftUntil: 0,    // 固定左侧第一列
                fixedRightFrom: 12,   // 从第12列开始固定到右侧
                fixedTopUntil: 0,     // 固定顶部第一行（标题行）
                fixedBottomFrom: 100, // 从第100行（在此例中是最后一行）开始固定到底部
            },
            valueOperator: {
                // date 值转换器会影响所以 valueType 为 `date` 的列
                date: {
                    getter: function (dataValue, cell, dataGrid) {
                        return new Date(dataValue).toLocaleString();
                    }
                }
            },
            showRowIndex: true,
        });

        // 获取数据表格实例
        var myDataGrid = $('#myDataGrid').data('zui.datagrid');
        // 获取选中
        $("#getselected").click(function () {
            // 获取当前已选中的行数据项
            var selectedItems = myDataGrid.getCheckItems();
            console.log(selectedItems)
        });
        // 模糊查询
        $("#search_result").click(function () {
            var search = $("#inputSearch3").val();
            myDataGrid.search(search);
        });

    });

上面的js代码主要包括以下内容：

1.配合列

2.配置最后一列自定义内容

3.配置可以分页

4.配置可以选择条目

5.模糊查询

6.获取选中的内容

这里同样列出后端Controller的代码：

@Controller
@RequestMapping("/test")
public class TestController {

    @Autowired
    private IAccountService accountSerivce;

    /**
     * 查询所有账户信息
     *
     * @param page
     * @param recPerPage
     * @return
     */
    @RequestMapping("/getaccount")
    @ResponseBody
    public JsonResult getaccount(@RequestParam(defaultValue = "1") int page,
                                 @RequestParam(defaultValue = "10") int recPerPage,
                                 @RequestParam(name = "sortBy", defaultValue = "") String sortBy,
                                 @RequestParam(name = "order", defaultValue = "") String order,
                                 @RequestParam(name = "search", defaultValue = "") String search) {
        PageInfo<Account> accountData = accountSerivce.getAccount(page, recPerPage, sortBy, order, search);
        if (accountData != null) {
            return PageDataConvertTool.convert(
                    accountData,
                    Constrants.SUCCESS,
                    Constrants.SUCCESS_MESSAGE);
        }
        return PageDataConvertTool.convert(
                accountData,
                Constrants.ERROR,
                Constrants.ERROR_MESSAGE);
    }
}

好了主要的内容就差不多这样了，应该一目了然了。page表示页号，recperpage表示页面数据记录长度，sortby表示待排序的字段，order代表排序的方式，search表示关键字的查询。至于PageDataConvertTool.convert方法是将PageInfo数据再次封装转化为ZUI 数据表格插件能够识别的数据结构，可以查官网文档得：

// 原创数据对象
{
    // 数据请求结果（必须），当值为 'succes'、'ok' 或 200 时则是为请求成功
    "result": "success",

    // 远程数据内容（必须）
    "data": [
        // ... 原创数据对象数组
    ],

    // 用户界面提示消息，当请求结果失败时，可以使用此属性返回文本显示在用户界面上
    "message": "",

    // 远程数据的分页信息对象（必须），其中 
    "pager": {
        "page": 1,           // 当前数据对应的页码
        "recTotal": 1001,    // 总的数据数目
        "recPerPage": 10,    // 每页数据数目
    }
}

mybatis后端xml的查询代码如下：

 <select id="selectAllAccount" resultMap="BaseResultMap">
        select
        <include refid="Base_Column_List"/>
        from account
        <if test="search!=null and search!=''">
            where account LIKE CONCAT(CONCAT('%', #{search}), '%')
        </if>
        <if test="sortby!=null and sortby!='' and order!=null and order!=''">
            order by ${sortby} ${order}
        </if>
    </select>

好了，其实这部分的主要难点已经交代完毕了。总之做类似的开发其实还是要看自己查阅文档快速学习的能力，并将这些知识点运用到开发项目中。学习之余还是要多强化的自己的编程能力，增加核心竞争力，毕竟增删改不能体现我们的价值嘛。勇挑战，勤学多练！“关键在于自己有没有一颗冠军的心。（来自《软件方法上》潘家宇）“，与共勉！

一生温情善良，不舍爱与自由！