此代码是springx-web 数据字典管理的代码
Treegrid 总结
项目使用spring springmvc mybaties
Easyui 基本是需要用到什么js 就导入什么js ,各项分开
以treegrid为例
先引入相关js 详细看demo
这里说一下easyui 引入的特有方式 loder
这是插件的结构
Easyloader.js 在 结构的根目录下
easyloader.js 部分代码
Var _1 定义了 每个插件 所需要的js
(为了防止报错 ,可以把_1中所有js 都导入)
用法:
首先导入loder.js
然后:
设置 loader的url locale 和theme 都在此url 目录下
Using(“这里是插件名称”,function(){}). 这样就通过loder.js 导入了插件依赖js
文件夹结构
Html 部分
<table id="tree"></table>
js 部分
$(function(){ using('treegrid',function(){//引入js $('#tree').treegrid({//创建一个treegrid url: ctx+"/dictionary/list", idField: 'id', treeField: 'text', striped:true,//隔行变色,修改easyi.css中.datagrid-row-alt样式 // lines: true, nowrap:true, autoRowHeight:false, //rownumbers: true, pagination: true, animate: false, pageList: [5,10,15], columns: [[ { title: 'Id', field: 'id',hidden:true}, { title: '标题', field: 'text' ,width:'150',align: 'center'}, { title: '编码', field: 'code' ,width:'150',align: 'center'}, { title: '描述', field: 'description' ,width:'150',align: 'center'}, { title: '状态', field: 'status',width:'120',align: 'center', formatter:function(value,rowData,rowIndex){ return "1"==value?"正常":"锁定" }}, { title: '创建时间', field: 'createDate',width:'180',align: 'center' }, { title: '操作', field: ' ' ,width:'230',align: 'center', formatter:function(value,rowData,rowIndex){ return "<a href='javascript:void(0)' οnclick='doEdit("+rowData.id+")'><span class='label label-xlg label-purple arrowed-in'>编辑</span></a>" + "<a href='javascript:void(0)' οnclick='doDelete("+rowData.id+","+rowData.id+")'><span class='label label-xlg label-warning arrowed-in'>删除</span></a>" + "<a href='javascript:void(0)' οnclick='doAdd("+rowData.id+")'><span class='label label-xlg label-pink arrowed-in'>添加下级</span></a>"; }}, { title: 'parentId', field: 'parentId' ,hidden:true}, { title: 'sortField', field: 'sortField' ,hidden:true} ]], onBeforeLoad: function(row,param){ if (!row) { // load top level rows param.id = 0; // 下一页id=0 } },rowStyler:function (index,row){//行样式,在这里并没有效果 var css=""; if (index%2==0){ css='background-color:#f5f5f5;'; }else{ css='background-color:#ffffff;'; } css+="height:45px;" } }); }) })
贴上 其他一些treegrid可能用到的方法
var childs=$("#tree").treegrid("getChildren",id);//获得此id的childs用来判断是否有下级
Easyui 的查询 通过给queryParams .text 传入text的值. 后台可以取出...此查询是异步
$('#tree').treegrid('reload');//重加载 treegrid
controller 代码
编辑和添加功能也需要用到list () 所以 list里面有一些逻辑
因为json 数据格式中需要state 字段,而数据库中没有设计state 所有新建了一个vo类
Service 代码
/**
* *
* 分页查询
* *
*/
public Page<DictionaryVo> findPage(Map<String, Object> params, Pageable pageable) {
PageHelper.startPage((pageable.getPageNumber() - 1) * pageable.getPageSize(), pageable.getPageSize());
List<DictionaryVo> dictionaryVoList = dictionaryMapper.findList(params);
PageInfo<DictionaryVo> pageInfo = new PageInfo<>(dictionaryVoList);
Page<DictionaryVo> page = new PageImpl<DictionaryVo>(pageInfo.getList(), pageable, pageInfo.getTotal());
return page;
}
/**
* 查找下级
*
* @param params
* @return
*/
public List<DictionaryVo> findChildren(Map<String, Object> params) {
return dictionaryMapper.findList(params);
}
Mybaties sql
<select id="findList" parameterType="map" resultType="com.springx.examples.showcase.vo.tree.DictionaryVo">
SELECT
t.id,
t.code,
t.text,
t.description,
t.sort_field sortField,
t.status,
t.create_date createDate,
t.parent_id parentId,
(select if(count(0)>0,'closed','open ' ) from tb_dictonary t1 where t1.parent_id=t.id
<if test="status!=null">
and t1.status =#{status}
</if>
) state
FROM
tb_dictonary AS t
<where>
<if test="parentId !=null">
and t.parent_id=#{parentId}
</if>
<if test="text!=null">
and t.text like CONCAT('%',#{text},'%' )
</if>
<if test="status!=null">
and t.status =#{status}
</if>
</where>
</select>
代码展示完毕
想要的效果是第一次只查询一级根数据并分页(逐步查询)
根据 字段state 来判断是否有下级
Json 数据如下
当state为closed时 是可点击状态
点击后 会自动向后台发送请求 .传递的参数有id 当前页码 page ,每页显示数量 rows 不需要手动传递.
此次下级数据并不分页.所以 查询的时候直接根据pid=id 查询所有
第二次查询到的数据如下
支持无限级. 只要有下级 那么查询出来的 state 就是closed
经验总结:贴出来的代码是最后的,和我之前的代码比较起来,干净整洁的多,
我自己写的代码,因为逻辑层次关系,多了很多无用代码.虽然也实现了功能.
还是要多读api 多思考,多积累才能写出好的代码