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

完成一个小项目，后端为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"><iclass="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 {@Autowiredprivate IAccountService accountSerivce;/*** 查询所有账户信息** @param page* @param recPerPage* @return*/@RequestMapping("/getaccount")@ResponseBodypublic 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>

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

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

ZUI + SSM框架下数据表格的使用相关推荐

SSM框架下对信息执行修改操作时的信息弹窗回显以及对信息修改后对数据库的更新问题
SSM框架下对信息执行修改操作时的信息弹窗回显以及对信息修改后的同步问题概括主要说一下前端的实现概括今天在做实训作业时,有个对数据信息进行修改的操作,要求点击修改按钮后弹出修改框,栏目中需要显 ...
layui数据表格解析html,layui框架table 数据表格的方法级渲染详解
layui框架table 数据表格的方法级渲染详解如下所示: //js 规范书写 var tst=table.render({ elem: '#test11' ,cols: [[ //标题栏 {ch ...
SSM框架下实现form表单提交的方式
实现form表单的提交有多种方式,这里我们主要讲两种常用的. 注:此Demo是在SSM框架下完成的,数据库采用MySQL,关于ssm整合的相关知识,这里不做过多赘述.主要展示表单提交方式,暂不考虑代码 ...
SSM框架下实现验证码图片验证功能（源码）
SSM框架下实现验证码图片验证功能背景图片资源路径 https://download.csdn.net/download/hero_qhz/10322064 一.首先,在pom里面加上需要用的资源j ...
ssm框架下的文件上传和下载
ssm下的文件上传和下载 1. 文件上传 1.1 文件上传需要的依赖文件上传需要使用到 commons-fileupload 和 commons-io 两个 jar 包. <dependenc ...
SSM框架下分页的实现（封装page.java和List?）
之前写过一篇博客 java分页的实现(后台工具类和前台jsp页面),介绍了分页的原理. 今天整合了Spring和SpringMVC和MyBatis,做了增删改查和分页,之前的逻辑都写在了Servle ...
SSM框架下后台数据库传送到前端jsp文件中
SSM框架中后台存储在数据库中的数据,如何传送到前端中使用呢? 前提:SSM框架已经搭好: Category.xml中的SQL语句集已经写好 Category中的GetXX()和SetXX()方法也已 ...
SSM框架下log4j的配置和使用
2019独角兽企业重金招聘Python工程师标准>>> 一.引入相关包和依赖我用的是pom文件的引入,我使用的是slf4j+log4j的方式,还有另一种方式为commons-log ...
浅谈SSM框架下实现简单登录界面
SSM框架搭建结果 Login.jsp <%@ page language="java" contentType="text/html; charset=UTF-8 ...

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

ZUI + SSM框架下数据表格的使用相关推荐

最新文章

热门文章