折雨的天空

新浪微薄腾讯微薄

最新碎语:最近霉到了住。哎。。。

您的位置:折雨的天空 >php开发> layer的tree插件,适用于ajax请求,挺好用的。

layer的tree插件,适用于ajax请求,挺好用的。

插件地址:http://www.wisdomelon.com/DTreeHelper/


可以ajax加载,只用来做展示,没有用来做增删改。

遇到的问题是,一次性加载tree太卡了,pdo的fetchall都要二十秒,由于没有找到更好的措施,只好使用

ajax加载树的方式,提高页面展示效率。


用法:



  <link rel="stylesheet" href="layui/css/layui.css">
  <link rel="stylesheet" href="layui_ext/dtree/dtree.css">
  <link rel="stylesheet" href="layui_ext/dtree/font/dtreefont.css">
  
  <script type="text/javascript" src="layui/layui.js""></script">

这里需要用layer插件加载的模式加载,官方的示例里面没有,官方需要在在线运行那个地方才能找到代码。就是下面这个




<script type="text/javascript">
  layui.extend({
    dtree: '{/}../layui_ext/dtree/dtree'
  }).use(['element','layer', 'table', 'code' ,'util', 'dtree', 'form'], function(){
    var element = layui.element, layer = layui.layer, table = layui.table, util = layui.util, dtree = layui.dtree, form = layui.form, $ = layui.$;
		
    var data = [
{"id":"001", "title": "湖南省", "last": false, "parentId": "0", 
 "children":[
    {"id":"001001", "title": "长沙市", "last":true, "parentId": "001"},
    {"id":"001002", "title": "株洲市", "last":true, "parentId": "001"},
    {"id":"001003", "title": "湘潭市", "last":true, "parentId": "001"},
    {"id":"001004", "title": "衡阳市", "last":true, "parentId": "001"},
    {"id":"001005", "title": "郴州市", "last":true, "parentId": "001"}]},
{"id":"002", "title": "湖北省", "last": false, "parentId": "0", 
 "children":[
    {"id":"002001", "title": "武汉市", "last":true, "parentId": "002"},
    {"id":"002002", "title": "黄冈市", "last":true, "parentId": "002"},
    {"id":"002003", "title": "潜江市", "last":true, "parentId": "002"},
    {"id":"002004", "title": "荆州市", "last":true, "parentId": "002"},
    {"id":"002005", "title": "襄阳市", "last":true, "parentId": "002"}]},
{"id":"003", "title": "广东省", "last": false, "parentId": "0", 
 "children":[
    {"id":"003001", "title": "广州市", "last":false, "parentId": "003", 
     "children":[
      {"id":"003001001", "title": "天河区", "last":true, "parentId": "003001"},
      {"id":"003001002", "title": "花都区", "last":true, "parentId": "003001"}]},
    {"id":"003002", "title": "深圳市", "last":true, "parentId": "003"},
    {"id":"003003", "title": "中山市", "last":true, "parentId": "003"},
    {"id":"003004", "title": "东莞市", "last":true, "parentId": "003"},
    {"id":"003005", "title": "珠海市", "last":true, "parentId": "003"},
    {"id":"003006", "title": "韶关市", "last":true, "parentId": "003"}]},
{"id":"004", "title": "浙江省", "last": false, "parentId": "0", 
 "children":[
    {"id":"004001", "title": "杭州市", "last":true, "parentId": "004"},
    {"id":"004002", "title": "温州市", "last":true, "parentId": "004"},
    {"id":"004003", "title": "绍兴市", "last":true, "parentId": "004"},
    {"id":"004004", "title": "金华市", "last":true, "parentId": "004"},
    {"id":"004005", "title": "义乌市", "last":true, "parentId": "004"}]},
{"id":"005", "title": "福建省", "last": false, "parentId": "0", 
 "children":[
    {"id":"005001", "title": "厦门市", "last":true, "parentId": "005" }]
}];
		
    var DTree = dtree.render({
      elem: "#demoTree",
      data: data
//    url: "please input your url"
    });
		
    dtree.on("node(demoTree)", function(obj){
      layer.msg(JSON.stringify(obj.param));
    })
  });
</script>

ajax请求,要注意的是,官方示例里面没有说明要返回last标志,或者说明的地方不明显,鼓捣了一会发现,官方的点击会发送ajax请求,而我


本地的就不会,于是加上了,就行了。


价格: 5.00
温馨提示:
输入邮箱或者手机号码,付款后可永久阅读隐藏的内容,邮箱或者手机号码仅用于认证。
电子商品,一经购买,不支持退款,特殊原因,请联系客服。
付费可读


------------正 文 已 结 束, 感 谢 您 的 阅 读 (折雨的天空)--------------------

转载请注明本文标题和链接:《layer的tree插件,适用于ajax请求,挺好用的。

奖励一下

取消

您的认可,是我写博客的动力,谢谢您!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

发表评论

路人甲 表情
看不清楚?点图切换