easyui treegrid 总结

此代码是springx-web 数据字典管理的代码

Treegrid 总结

项目使用spring springmvc mybaties

Easyui 基本是需要用到什么js 就导入什么js ,各项分开

以treegrid为例

先引入相关js 详细看demo

这里说一下easyui 引入的特有方式 loder

这是插件的结构

Easyloader.js 在结构的根目录下

easyloader.js 部分代码

扫描二维码关注公众号，回复： 757374 查看本文章

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)' onclick='doEdit("+rowData.id+")'><span class='label label-xlg label-purple arrowed-in'>编辑</span></a>" +
                            "<a href='javascript:void(0)' onclick='doDelete("+rowData.id+","+rowData.id+")'><span class='label label-xlg label-warning arrowed-in'>删除</span></a>" +
                            "<a href='javascript:void(0)' onclick='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 多思考,多积累才能写出好的代码

猜你喜欢