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⽂件。官⽅⽂档：
下⾯是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" >
<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',
className: 'text-center',
sort: true,
},
{
label: '操作',
html: true,
sort: false,
className: 'text-center',
/
/ 值转换器仅仅影响当前列
valueOperator: {
getter: function (dataValue, cell, dataGrid) {
var id = fig.data.id;
return "<button class='btn btn-danger btn-sm' onclick='console.log(" + id + ")'><i class='icon icon-trash'></i>删除</button> " + "<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 = CheckItems();
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 = Account(page, recPerPage, sortBy, order, search);
if (accountData != null) {
vert(
accountData,
Constrants.SUCCESS,
Constrants.SUCCESS_MESSAGE);
}
vert(
accountData,
Constrants.ERROR,
Constrants.ERROR_MESSAGE);
}
}
好了主要的内容就差不多这样了，应该⼀⽬了然了。page表⽰页号，recperpage表⽰页⾯数据记录长度，sortby表⽰待排序的字
段，order代表排序的⽅式，search表⽰关键字的查询。⾄于vert⽅法是将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"/>
ssm框架实现登录功能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>
好了，其实这部分的主要难点已经交代完毕了。总之做类似的开发其实还是要看⾃⼰查阅⽂档快速学习的能⼒，并将这些知识点运⽤到开发项⽬中。学习之余还是要多强化的⾃⼰的编程能⼒，增加核⼼竞争⼒，毕竟增删改不能体现我们的价值嘛。勇挑战，勤学多练！“关键在于⾃⼰有没有⼀颗冠军的⼼。（来⾃《软件⽅法上》潘家宇）“，与共勉！
⼀⽣温情善良，不舍爱与⾃由！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论