zTree插件的编写

来源：互联网发布：mysql字段约束编辑：程序博客网时间：2024/06/16 11:55

在很多项目开发中，大都使用到了树插件，原因是易操作和直观明了，接下来向大家介绍zTree树插件的编写过程。有许多不足之处，希望大家指出。

效果展示。
引入ztree，大家可自行去ztree的官网下载所需文件。

(1) ztree.jsp

<link rel="stylesheet" type="text/css" href="<%=path %>/resources/lib/ztree/css/zTreeStyle.css" /><script type="text/javascript" src="<%=path %>/resources/lib/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="<%=path %>/resources/lib/ztree/js/jquery.ztree.core.min.js"></script><div class="pos-a" style="width:280px;left:0;top:0; bottom:0; height:100%; border-right:1px solid #e5e5e5; background-color:#f5f5f5">    <ul id="channelTree" class="ztree">    </ul></div><script type="text/javascript">$(function(){    $("#channelTree").mytree();//直接调用树插件});</script>

注意以上代码中 class=”ztree”不能修改，id可修改。

(2)树插件

/* 插件树：传入setting原型扩展方法 */var zTreeObj = null;//(function($) {    $.fn.mytree = function(opts) {        var setting = $.extend({                view: {                    selectedMulti: false,                    dblClickExpand:true                },                async: {                    enable: true,                    type:"GET",                    url: opts?(opts.url||"ajaxchannel"):"ajaxchannel"                },                callback: {                    onAsyncSuccess: function zTreeOnAsyncSuccess()                    {                        zTreeObj.expandAll(true);                    },                },                data: {                    simpleData: {                        enable: true,                        idKey: "id",                         pIdKey: "parentId",                         rootPId: -1, //最顶端的根节点id，可以去ztree官网了解                    },                    key:{                        name:"title"                    }                }        },opts||{});        zTreeObj = $.fn.zTree.init($(this), setting);        zTreeObj.getCheckParentNodes = getCheckParentNodes;        zTreeObj.getCheckChildNodes = getCheckChildNodes;           /**         * 回调函数         */        function zTreeOnAsyncSuccess()        {            // tips no data TODO            zTreeObj.expandAll(true);        }        function getCheckParentNodes(treeNode,checked) {            var ps = new Array();            var pn;            while((pn=treeNode.getParentNode())) {                if(pn.checked==checked) ps.push(pn);                treeNode = pn;            }            return ps;        }        //第三个参数存储所有子节点        function getCheckChildNodes(treeNode,checked,cs) {            var ccs;            if((ccs=treeNode.children)) {                for(var i=0;i<ccs.length;i++) {                    var c = ccs[i];                    if(c.checked==checked) {                        cs.push(c);                    }                    getCheckChildNodes(c,checked,cs);                }            }        }        return zTreeObj;    };})(jQuery);

(3) 前端ztreeController.java

    /**     * 栏目树：获取id,parentId,Name 异步ajax     * 这里的"/ajaxchannel"返回给上面插件的url地址处     * @return     */    @RequestMapping("/ajaxchannel")    @ResponseBody    public List<Channel> ajaxchannel() {        List<Channel> mvList = channelService.listChannelByTree();        return mvList;    }

(4)数据库实体(数据库表,这里创建树所需要的参数就id,parentId,title。其他的参数大家可以删除)和mybatis语句.

数据库表

– Table structure for t_channel

DROP TABLE IF EXISTS t_channel;
CREATE TABLE t_channel (
id int(11) NOT NULL AUTO_INCREMENT,
title varchar(64) DEFAULT NULL,
description varchar(256) DEFAULT NULL,
icon varchar(128) DEFAULT NULL,
frontCover varchar(128) DEFAULT NULL,
keyword varchar(128) DEFAULT NULL,
creatorId int(11) DEFAULT NULL,
createTime datetime DEFAULT NULL,
publishTime datetime DEFAULT NULL,
publisherId int(11) DEFAULT NULL,
type int(11) DEFAULT NULL,
hint int(11) DEFAULT NULL,
channelOrder int(11) DEFAULT NULL,
parentId int(11) DEFAULT NULL,
status tinyint(1) DEFAULT NULL,
recommend tinyint(1) DEFAULT NULL,
PRIMARY KEY (id)
) ENGINE=InnoDB AUTO_INCREMENT=388 DEFAULT CHARSET=utf8 COMMENT=’栏目实体，作为一个分类，其下可以包含其他栏目，或文章，媒体文件等’;

– Records of t_channel

INSERT INTO t_channel VALUES (‘0’, ‘网站内容管理栏目’, null, null, null, null, null, null, null, null, ‘0’, ‘12’, ‘0’, ‘-1’, ‘0’, ‘0’);
INSERT INTO t_channel VALUES (‘1’, ‘校园趣味’, null, null, null, null, null, null, null, null, ‘1’, ‘231’, ‘0’, ‘0’, ‘1’, ‘1’);
INSERT INTO t_channel VALUES (‘2’, ‘校园趣味1’, null, null, null, null, null, null, null, null, ‘2’, ‘32’, ‘1’, ‘1’, ‘1’, ‘0’);
INSERT INTO t_channel VALUES (‘3’, ‘校园趣味2’, null, null, null, null, null, null, null, null, ‘3’, ‘12’, ‘2’, ‘1’, ‘1’, ‘0’);
INSERT INTO t_channel VALUES (‘4’, ‘校园趣味3’, null, null, null, null, null, null, null, null, ‘4’, ‘23’, ‘3’, ‘1’, ‘0’, ‘1’);
INSERT INTO t_channel VALUES (‘5’, ‘校园趣味4’, null, null, null, null, null, null, null, null, ‘2’, ‘343’, ‘4’, ‘1’, ‘0’, ‘0’);
INSERT INTO t_channel VALUES (‘6’, ‘文化交流’, null, null, null, null, null, null, null, null, ‘2’, ‘343’, ‘0’, ‘0’, ‘1’, ‘0’);
INSERT INTO t_channel VALUES (‘7’, ‘文化交流1’, null, null, null, null, null, null, null, null, ‘3’, ‘33’, ‘1’, ‘6’, ‘1’, ‘1’);
INSERT INTO t_channel VALUES (‘8’, ‘文化交流2’, null, null, null, null, null, null, null, null, ‘2’, ‘22’, ‘2’, ‘6’, ‘0’, ‘0’);
INSERT INTO t_channel VALUES (‘9’, ‘文化交流3’, null, null, null, null, null, null, null, null, ‘3’, ‘434’, ‘3’, ‘6’, ‘1’, ‘1’);
INSERT INTO t_channel VALUES (‘10’, ‘文化交流4’, null, null, null, null, null, null, null, null, ‘1’, ‘54’, ‘4’, ‘6’, ‘0’, ‘0’);
INSERT INTO t_channel VALUES (‘11’, ‘校园天地’, null, null, null, null, ‘0’, null, null, ‘0’, ‘2’, ‘56’, ‘0’, ‘0’, ‘0’, ‘0’);
INSERT INTO t_channel VALUES (‘12’, ‘校园天地1’, null, null, null, null, null, null, null, null, ‘4’, ‘7687’, ‘1’, ‘11’, ‘1’, ‘0’);
INSERT INTO t_channel VALUES (‘13’, ‘校园天地2’, null, null, null, null, null, null, null, null, ‘2’, ‘676’, ‘2’, ‘11’, ‘0’, ‘1’);
INSERT INTO t_channel VALUES (‘14’, ‘校园天地3’, null, null, null, null, null, null, null, null, ‘1’, ‘7898’, ‘3’, ‘11’, ‘1’, ‘0’);
INSERT INTO t_channel VALUES (‘359’, ‘娱乐说教’, null, null, null, null, ‘0’, null, null, ‘0’, ‘2’, ‘0’, ‘0’, ‘0’, ‘1’, ‘1’);
INSERT INTO t_channel VALUES (‘360’, ‘校园天地4’, null, null, null, null, ‘0’, null, null, ‘0’, ‘1’, ‘0’, ‘4’, ‘11’, ‘0’, ‘0’);
INSERT INTO t_channel VALUES (‘361’, ‘文化交流5’, null, null, null, null, ‘0’, null, null, ‘0’, ‘1’, ‘0’, ‘5’, ‘6’, ‘0’, ‘0’);
INSERT INTO t_channel VALUES (‘362’, ‘世界太大1’, null, null, null, null, ‘0’, null, null, ‘0’, ‘4’, ‘0’, ‘0’, ‘0’, ‘1’, ‘1’);
INSERT INTO t_channel VALUES (‘363’, ‘校园天地5’, null, null, null, null, ‘0’, null, null, ‘0’, ‘1’, ‘0’, ‘5’, ‘11’, ‘0’, ‘0’);
INSERT INTO t_channel VALUES (‘383’, ‘5555’, null, null, null, null, ‘0’, null, null, ‘0’, ‘1’, ‘0’, ‘1’, ‘5’, ‘1’, ‘0’);
INSERT INTO t_channel VALUES (‘384’, ‘吼吼吼’, null, null, null, null, ‘0’, null, null, ‘0’, ‘4’, ‘0’, ‘0’, ‘0’, ‘0’, ‘1’);
INSERT INTO t_channel VALUES (‘385’, ‘我去看看’, null, null, null, null, ‘0’, null, null, ‘0’, ‘4’, ‘0’, ‘1’, ‘362’, ‘0’, ‘0’);
INSERT INTO t_channel VALUES (‘386’, ‘执行主席1’, null, null, null, null, ‘0’, null, null, ‘0’, ‘1’, ‘0’, ‘1’, ‘384’, ‘0’, ‘0’);
INSERT INTO t_channel VALUES (‘387’, ‘教育为本’, null, null, null, null, ‘0’, null, null, ‘0’, ‘2’, ‘0’, ‘0’, ‘0’, ‘1’, ‘1’);

实体类

public class Channel {

/** * 栏目的主键 */private int id;/** *栏目的名称  */private String title;/** *栏目的描述 */private String description;/** *栏目的图标 */private String icon;/** *栏目标题处的封面 */private String frontCover;/** *栏目的关键字 */private String keyword;/** *栏目的创建者 */private int creatorId;/** *栏目创建时间 */private Date createTime;/** *栏目的发布时间 */private Date publishTime;/** *栏目的发布id */private int publisherId;/** *栏目的类型 */private int type; // 栏目, 专题/** *栏目的点击量 */private int hint;/** *栏目的排列 */private int channelOrder; // 排列的优先顺序/** *父类栏目Id */private int parentId; // 方便逆向查找, 以及不同上层栏目下面包含同一栏目,(保留字段)/** * 栏目的状态，1 可用, 0不可用 */private byte status; /** * 是否是推荐栏目， true 推荐, false不推荐 */private boolean recommend; .....

mybatis语句

<resultMap id="BaseResultMap" type="com.seelecloud.cms.entity.Channel">    <id column="id" jdbcType="INTEGER" property="id" />    <result column="title" jdbcType="VARCHAR" property="title" />    <result column="description" jdbcType="VARCHAR" property="description" />    <result column="icon" jdbcType="VARCHAR" property="icon" />    <result column="frontCover" jdbcType="VARCHAR" property="frontCover" />    <result column="keyword" jdbcType="VARCHAR" property="keyword" />    <result column="creatorId" jdbcType="INTEGER" property="creatorId" />    <result column="createTime" jdbcType="TIMESTAMP" property="createTime" />    <result column="publishTime" jdbcType="TIMESTAMP" property="publishTime" />    <result column="publisherId" jdbcType="INTEGER" property="publisherId" />    <result column="type" jdbcType="INTEGER" property="type" />    <result column="hint" jdbcType="INTEGER" property="hint" />    <result column="channelOrder" jdbcType="INTEGER" property="channelOrder" />    <result column="parentId" jdbcType="INTEGER" property="parentId" />    <result column="status" jdbcType="BIT" property="status" />    <result column="recommend" jdbcType="BIT" property="recommend" />  </resultMap>  <select id="listChannelByTree"  resultMap="BaseResultMap">       select id,title,parentId         from t_channel  </select>

多说一句，以上树插件中的属性都可以修改，我举一个例子给大家参考：

var tree = null;    tree = $("#mytree").mytree({        async: {            enable: true,            type:"GET",            //这里是修改url地址            url: "/scms/article/ajaxchannel"        },        //下面是对回调函数的修改格式，以上就可以满足一些需求了.        /*callback:{            onAsyncSuccess:function(){                tree.expandAll(true);            },            //这里是扩展的属性方法            onDblClick: function beforeonClick(event, treeId, treeNode) {                $("#channelName").val(treeNode.title);                $("#channelId").val(treeNode.id);                hideMenu();            },             //这里是扩展的属性方法            beforeClick:function beforeClick(treeId, treeNode) {                var check = (treeNode && !treeNode.isParent);                if (!check) alert("不能选择根节点...");                return check;                                           }        }*/    }); });

1 0