2017-04-25 19:21:14 fanxiangru999 阅读数 8341

这里以bootstrap treeview为示例:

1、先看前端效果:http://jonmiles.github.io/bootstrap-treeview
2、前端效果中右键查看源码,我们直接去看json数据是什么样滴~:

var json = '[' +
          '{' +
            '"text": "Parent 1",' +
            '"nodes": [' +
              '{' +
                '"text": "Child 1",' +
                '"nodes": [' +
                  '{' +
                    '"text": "Grandchild 1"' +
                  '},' +
                  '{' +
                    '"text": "Grandchild 2"' +
                  '}' +
                ']' +
              '},' +
              '{' +
                '"text": "Child 2"' +
              '}' +
            ']' +
          '},' +
          '{' +
            '"text": "Parent 2"' +
          '},' +
          '{' +
            '"text": "Parent 3"' +
          '},' +
          '{' +
            '"text": "Parent 4"' +
          '},' +
          '{' +
            '"text": "Parent 5"' +
          '}' +
        ']';


3、json数据分析:数据生成的时候,“text“ 对应的内容就是树中显示内容,然后设置“nodes”(子节点),子节点中又是先放入“text”,而后是“nodes”,这里需要一个递归来完成,当没有子节点的时候递归中断。
4、我的数据表:(PARENT_ID ='' 为最高级父节点)


5、java递归代码:

public List<Map> getChildrens(List<Map> list) throws SystemException {
		//数据最终结果
		List<Map> result = new ArrayList<Map>();
		//1、循环最高级父节点数据
		for(Map map : list){
			Map tempMap = new HashMap();
			//2、放入json数据
			tempMap.put("text", map.get("ORG_NAME"));
			
			//3、判断是否存在子节点
			if(map.get("LEAF").equals("0")){
				//4、根据父节点id获取子节点
				StringBuffer sb = new StringBuffer();
				sb.append("SELECT * FROM `mst_org` org where org.PARENT_ID ='"+map.get("ORG_ID")+"' ");
				//5、调取自己循环获取子节点
				List<Map> childs =  this.getChildrens(this.getDao().findBySql(sb.toString(), Map.class));
				tempMap.put("nodes", childs);
			}
			result.add(tempMap);
		}
		return result;
	}


6、dao调取:
public List<Map> loadMstOrgForTree() throws SystemException {
		List<Map> result = new ArrayList<Map>();
		//获取顶级父节点
		StringBuffer sb = new StringBuffer();
		sb.append("SELECT * FROM `mst_org` org where org.PARENT_ID ='' ");
		List<Map> list = this.getChildrens(this.getDao().findBySql(sb.toString(), Map.class));
		
		return list;
	}

 最终效果图:



看过的大兄弟、小胸弟 给顶一下吧,也可以关注我的新浪微博:俺叫范小赖        随时联系我哦




2018-03-01 16:24:56 qq_26115733 阅读数 1272
  • 一般用法
<select id="organizationId" class="selectpicker">
            <option>Mustard</option>
            <option>Ketchup</option>
            <option>Relish</option>
</select>
  • 动态新增方法一:
var select = $("#organizationId");
    select.append("<option value='1'>香蕉</option>");
    select.append("<option value='2'>苹果</option>");
    select.append("<option value='3'>橘子</option>");
    select.append("<option value='4'>石榴</option>");
    select.append("<option value='5'>棒棒糖</option>");
    select.append("<option value='6'>桃子</option>");
    select.append("<option value='7'>陶子</option>");
  • 动态新增方法二:
var select = $("#organizationId");
    $.getJSON('/hr/organization/query',function (data) {
        init(select, data.rows);
    });

    function init(target, data) {
        $.each(data, function (i, item) {
            var option = $('<option></option>');
            option.attr('value', item['organizationId']);
            option.text(item['organizationCode']);
            target.append(option);
        });
    }
  • 动态新增方法三:
$('#organizationId').bootstrapSelect({
        url: '/hr/organization/query',
        valueField: 'organizationId',
        textField: 'organizationCode',
    });

封装代码为:

(function ($) {
    //1.定义jquery的扩展方法bootstrapSelect
    $.fn.bootstrapSelect = function (options, param) {
        if (typeof options == 'string') {
            return $.fn.bootstrapSelect.methods[options](this, param);
        }
        //2.将调用时候传过来的参数和default参数合并
        options = $.extend({}, $.fn.bootstrapSelect.defaults, options || {});
        //3.添加默认值
        var target = $(this);
        if (!target.hasClass("selectpicker")) target.addClass("selectpicker");
        target.attr('valuefield', options.valueField);
        target.attr('textfield', options.textField);
        target.empty();
        var option = $('<option></option>');
        option.attr('value', '');
        option.text(options.placeholder);
        target.append(option);
        //4.判断用户传过来的参数列表里面是否包含数据data数据集,如果包含,不用发ajax从后台取,否则否送ajax从后台取数据
        if (options.data) {
            init(target, options.data);
        }
        else {
            //var param = {};
            //options.onBeforeLoad.call(target, options.param);
            if (!options.url) return;
            $.getJSON(options.url, options.param, function (data) {
                init(target, data.rows);
            });
        }

        function init(target, data) {
            $.each(data, function (i, item) {
                var option = $('<option></option>');
                option.attr('value', item[options.valueField]);
                option.text(item[options.textField]);
                target.append(option);
            });
            //options.onLoadSuccess.call(target);
        }

        // target.unbind("change");
        // target.on("change", function (e) {
        //     if (options.onChange)
        //         return options.onChange(target.val());
        // });
    }

    //6.默认参数列表
    $.fn.bootstrapSelect.defaults = {
        url: null,
        param: null,
        data: null,
        valueField: 'value',
        textField: 'text',
        placeholder: '请选择',

    };

})(jQuery);
2019-02-25 15:59:07 zhangwenwu2 阅读数 464

bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件,该jQuery插件基于Twitter Bootstrap。写这篇文章的目的在于记录下使用方法,以期后用。

一、插件官网:https://jquery-plugins.net/bootstrap-tree-view 
二、demo示例:http://jonmiles.github.io/bootstrap-treeview/

三、依赖:

Bootstrap v3.3.4 (>= 3.0.0)
jQuery v2.1.3 (>= 1.9.0)

四、使用方法:

1.html文件引入依赖:

<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-treeview.min.css" />
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js" ></script>
<script type="text/javascript" src="js/bootstrap-treeview.min.js" ></script>

2.设置一个DOM元素以接收树形数据:

<div id="tree"></div>

3.使用格式:

$('#tree').treeview(options);  //其中options选项允许用户定制treeview的默认外观和行为。它们在初始化时作为一个对象被传递给插件。

4.使用示例(js动态获取后台数据,并渲染树形结构):

$(function() {
    $('#tree').treeview({
        data: getTree()//节点数据
    });
})

function getTree() {
    //节点上的数据遵循如下的格式:
    var tree = [{
        text: "Node 1", //节点显示的文本值  string
        icon: "glyphicon glyphicon-play-circle", //节点上显示的图标,支持bootstrap的图标  string
        selectedIcon: "glyphicon glyphicon-ok", //节点被选中时显示的图标       string
        color: "#ff0000", //节点的前景色      string
        backColor: "#1606ec", //节点的背景色      string
        href: "#http://www.baidu.com", //节点上的超链接
        selectable: true, //标记节点是否可以选择。false表示节点应该作为扩展标题,不会触发选择事件。  string
        state: { //描述节点的初始状态    Object
            checked: true, //是否选中节点
            /*disabled: true,*/ //是否禁用节点
            expanded: true, //是否展开节点
            selected: true //是否选中节点
        },
        tags: ['标签信息1', '标签信息2'], //向节点的右侧添加附加信息(类似与boostrap的徽章)    Array of Strings
        nodes: [{
            text: "Child 1",
            nodes: [{
                text: "Grandchild 1"
            }, {
                text: "Grandchild 2"
            }]
        }, {
            text: "Child 2"
        }]
    }, {
        text: "Parent 2",
        nodes: [{
            text: "Child 2",
            nodes: [{
                text: "Grandchild 3"
            }, {
                text: "Grandchild 4"
            }]
        }, {
            text: "Child 2"
        }]
    }, {
        text: "Parent 3"
    }, {
        text: "Parent 4"
    }, {
        text: "Parent 5"
    }];

    return tree;
}

五、其他说明:

1、参数详解(可用的参数):var options = {

    data: data, //data属性是必须的,是一个对象数组    Array of Objects.
    color: "", //所有节点使用的默认前景色,这个颜色会被节点数据上的backColor属性覆盖.        String
    backColor: "#000000", //所有节点使用的默认背景色,这个颜色会被节点数据上的backColor属性覆盖.     String
    borderColor: "#000000", //边框颜色。如果不想要可见的边框,则可以设置showBorder为false。        String
    nodeIcon: "glyphicon glyphicon-stop", //所有节点的默认图标
    checkedIcon: "glyphicon glyphicon-check", //节点被选中时显示的图标         String
    collapseIcon: "glyphicon glyphicon-minus", //节点被折叠时显示的图标        String
    expandIcon: "glyphicon glyphicon-plus", //节点展开时显示的图标        String
    emptyIcon: "glyphicon", //当节点没有子节点的时候显示的图标              String
    enableLinks: false, //是否将节点文本呈现为超链接。前提是在每个节点基础上,必须在数据结构中提供href值。        Boolean
    highlightSearchResults: true, //是否高亮显示被选中的节点        Boolean
    levels: 2, //设置整棵树的层级数  Integer
    multiSelect: false, //是否可以同时选择多个节点      Boolean
    onhoverColor: "#F5F5F5", //光标停在节点上激活的默认背景色      String
    selectedIcon: "glyphicon glyphicon-stop", //节点被选中时显示的图标     String

    searchResultBackColor: "", //当节点被选中时的背景色
    searchResultColor: "", //当节点被选中时的前景色

    selectedBackColor: "", //当节点被选中时的背景色
    selectedColor: "#FFFFFF", //当节点被选中时的前景色

    showBorder: true, //是否在节点周围显示边框
    showCheckbox: false, //是否在节点上显示复选框
    showIcon: true, //是否显示节点图标
    showTags: false, //是否显示每个节点右侧的标记。前提是这个标记必须在每个节点基础上提供数据结构中的值。
    uncheckedIcon: "glyphicon glyphicon-unchecked", //未选中的复选框时显示的图标,可以与showCheckbox一起使用
}

2、方法详解(可用的方法列表):

1.  checkAll(options);//选中所有树节点
2.  checkNode(node | nodeId, options);  //选中一个给定nodeId的树节点
3.  clearSearch();//清除查询结果
4.  collapseAll(options);//折叠所有树节点
5.  collapseNode(node | nodeId, options);//折叠一个给定nodeId的树节点和它的子节点
6.  disableAll(options);//禁用所有树节点
7.  disableNode(node | nodeId, options);//禁用一个给定nodeId的树节点
8.  enableAll(options);//激活所有树节点
9.  enableNode(node | nodeId, options);//激活给定nodeId的树节点
10. expandAll(options);//展开所有节点
11. expandNode(node | nodeId, options);//展开给定nodeId的树节点
12. getCollapsed();//返回被折叠的树节点数组
13. getDisabled();//返回被禁用的树节点数组
14. getEnabled();//返回被激活的树节点数组  
15. getExpanded();//返回被展开的树节点数组
16. getNode(nodeId);//返回与给定节点id相匹配的单个节点对象。
17. getParent(node | nodeId);//返回给定节点id的父节点
18. getSelected();//返回被选定节点的数组。
19. getSiblings(node | nodeId);//返回给定节点的兄弟节点数组
20. getUnselected();//返回未选择节点的数组
21. remove();//删除the tree view component.删除绑定的事件,内部附加的对象,并添加HTML元素。
22. revealNode(node | nodeId, options);//显示给定的树节点,将树从节点扩展到根。
23. search(pattern, options);//在树视图中搜索匹配给定字符串的节点,并在树中突出显示它们。返回匹配节点的数组。
24. selectNode(node | nodeId, options);//选择一个给定的树节点
25. toggleNodeChecked(node | nodeId, options);//Toggles a nodes checked state; checking if unchecked, unchecking if checked.
26. toggleNodeDisabled(node | nodeId, options);//切换节点的禁用状态;
27. toggleNodeExpanded(node | nodeId, options);//切换节点的展开与折叠状态
28. toggleNodeSelected(node | nodeId, options);//切换节点的选择状态
29. uncheckAll(options);//不选所有节点
30. uncheckNode(node | nodeId, options);//不选给定nodeId的节点
31. unselectNode(node | nodeId, options);//不选给定nodeId的节点

说明:可以通过两种方式来调用方法:

1、插件包装器:插件的包装器可以作为访问底层方法的代理。

$('#tree').treeview('methodName', args);  

其中,多个参数必须使用数组对象来传入。

2、直接使用treeview:你可以通过下面两种方法中的一种来获取treeview对象实例:

//该方法返回一个treeview的对象实例
$('#tree').treeview(true).methodName(args);

//对象实例也保存在DOM元素的data中, 可以使用'treeview'的id来访问它。
$('#tree').data('treeview').methodName(args); 

3、事件详解(可用的事件列表):

1.  nodeChecked (event, node) - 一个节点被checked.
2.  nodeUnchecked (event, node) - 一个节点被unchecked.
3.  nodeCollapsed (event, node) - 一个节点被折叠.
4.  nodeDisabled (event, node) - 一个节点被禁用.
5.  nodeEnabled (event, node) - 一个节点被启用.
6.  nodeExpanded (event, node) - 一个节点被展开.
7.  nodeSelected (event, node) - 一个节点被选择.
8.  nodeUnselected (event, node) - 取消选择一个节点.
9.  searchComplete (event, results) - 搜索完成之后触发.
10. searchCleared (event, results) - 搜索结果被清除之后触发.

说明:事件的调用有两种方式:

第 1 种:在参数中使用回调函数来绑定任何事件:
$('#tree').treeview({
    //命名约定:以on为前缀,并将事件名的第一个字母转为大写,例如: nodeSelected -> onNodeSelected
    onNodeSelected:function(event, data) {
        // 事件代码...
    }
});      

第 2 种:使用标准的jQuery .on()方法来绑定事件:
$('#tree').on('nodeSelected',function(event, data) {
    // 事件代码...
});
2017-09-28 04:24:23 s1441101265 阅读数 14235

最后想了下,可能是因为没有找到tree这个元素!!!
但是很奇怪,我的tree这个ul放在了bootstrap的model里面,虽然进入页面是隐藏的,但是初始化的时候一样是隐藏的,就可以成功;
基于上面的猜测,我把代码放到了init()方法后面,然后就成功了…
示例:
这里写图片描述
按照百度搜索的,因为每个人的情况不一样吧,实现这个初始化默认选中,真是几经波折,搞了2个小时,能实现真是不容易,劳资运气真好
(ps:如果chkDisabled为空,那js调试一下,应该是node为空了)
这里写图片描述

$(document).ready(function(){
	$.getJSON(contextPath + "role/getPermissionsList.htm",function(json){
		$.fn.zTree.init($("#tree"), setting, json);
		<#if menuInfoList??>
			var treeObj = $.fn.zTree.getZTreeObj("tree");
			var pName = "";
			var pId = "";
			<#list menuInfoList as menu>
				//把菜单显示出来
				<#if menu.menuName != "">
					pName += "<button type='button' class='btn btn-info btn-xs'>${menu.menuName}</button>";
				</#if>
				pId += ${menu.menuId} + ",";
				if (treeObj != null) {
					<#if menu.menuId != ''>
						var node = treeObj.getNodeByParam("id",'${menu.menuId}', null);
						//勾选
						treeObj.checkNode(node, true, true);
						//treeObj.selectNode(node);//选中
						treeObj.expandNode(node,true,true,true);
					</#if>
				}
			</#list>
			if (pName != "") {
		    	$("#permissionsList").empty();
		        $("#permissionsList").append(pName);
		        $("#btn_addPermissions").text("更改权限");
		        $("#permissionsIds").val(pId);
			}else{
				$("#permissionsList").empty();
				$("#btn_addPermissions").text("添加权限");
				$("#permissionsIds").val("");
			}
		</#if>
	});
});
2019-06-07 18:52:38 hsl0530hsl 阅读数 233

具体的代码请参考GitHub:
https://github.com/slhuang520/vue/tree/master/cli/my-vue-cli

请注意使用的 VUE 版本,不同的版本,有一些配置不一样。
这里是 VUE 3.x,其以下 VUE的配置不一样,请参考,不要照抄。
整体的目录结构如下:
在这里插入图片描述

1. 建立VUE项目

先按照Vue CLI 的官网建立一个项目。
使用 vue create xxxxx 命令创建项目,中间的一些配置可以自己选择,也可以使用默认的配置。

2. 添加依赖

package.json 文件的 devDependencies 节点下面,添加如下依赖:

"devDependencies": {
    "webpack": "^4.33.0",
    "jquery": "^3.4.1",
    "bootstrap": "^4.3.1",
    "popper.js": "^1.15.0" // bootstrap 中的一些组件依赖
}

然后使用 npm install 命令加载上面的依赖包。

3. 新建 vue.config.js 配置文件

Vue CLI3.0 中的所有配置都在 vue.config.js 文件,你在这里配置好,脚手架自动使用你的配置覆盖掉默认的配置。
其中popper.js 用于在 Bootstrap 中显示弹窗、提示、下拉菜单,所以需要引入。

//vue.config.js
const webpack = require("webpack");

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({// 将 $ 变成全局变量
        $: 'jquery',
        jQuery: 'jquery',
        Popper: ['popper.js', 'default'] // bootstrap 中的一些组件依赖
      })
    ]
  }
};

main.js 文件中直接引入 jquery 和 Bootstrap :

// import $ from 'jquery'; // 引入外部js,jquery 已经成为一个全局变量,这里已经可以不用再手动引入了
import 'bootstrap'; // 引入外部js

然后在不同的组件中都可以正常使用 jquery 和 bootstrap 插件了。

4. 手动添加 bootstrap.css 文件

bootstrap.css 手动放入 src 的一个同级目录下,如果没有,可以新建一个目录。
在这里插入图片描述
main.js 中引入这里的 bootstrap.css 文件

import '../static/bootstrap/bootstrap.css'; // 引入外部css

5. Demo 如下:

5.1 main.js
//main.js
import Vue from 'vue';
import App from './App.vue';
// import router from './router'; // router目前可以不使用
// import appServer from './server.vue'; // 引入server组件
import '../static/bootstrap/bootstrap.css'; // 引入外部css
// import $ from 'jquery'; // 引入外部js,这里已经可以不用手动引入了
// import '../static/bootstrap/bootstrap.js'; // 这样不行
import 'bootstrap'; // 引入外部js
import header from './components/common/header.vue';
import footer from './components/common/footer.vue';

Vue.config.productionTip = false;
// Vue.component('app-server', appServer); // 注册一个全局组件
Vue.component('app-header', header);
Vue.component('app-footer', footer);
$(function () {
  //alert(333);
});
new Vue({
  // router,
  render: h => h(App)
}).$mount('#app');

5.2 App.vue
//App.vue
<template>
  <div class="container">
    <app-header></app-header>
    <hr>
    <div class="row">
      <app-server></app-server>
      <app-server-status></app-server-status>
    </div>
    <hr>
    <app-footer></app-footer>
  </div>
</template>

<script>
 // import $ from 'jquery'; // 这里可以不用再引入了
  import serverStatus from './components/server/serverStatus.vue';
  import server from './components/server/server.vue';
  export default {
    components: { // 定义局部组件
      'app-server': server,
      'app-server-status': serverStatus
    }
  }
</script>

5.3 footer.vue
//footer.vue
<template>
  <div class="row">
    <div class="col-xs-12">
      <span>xxxx有限责任公司</span>
    </div>
  </div>
</template>

5.4 header.vue
//header.vue
<template>
  <div class="row">
    <div class="col-xs-12">
      <header>
        <h1>服务器状态</h1>
      </header>
    </div>
  </div>
</template>

5.5 server.vue
//server.vue
<template>
  <div class="col-xs-12 col-sm-6">
    <ul class="list-group">
      <li class="list-group-item"
          style="cursor: pointer;"
          :key="index"
          v-for="index in 5"
          data-toggle="tooltip"
          :title="index"
          :class="{striped: index % 2 == 0}">
        服务器{{index}}
      </li>
    </ul>
  </div>
</template>

<script>
 export default {
   mounted: function () {
     $('[data-toggle="tooltip"]').tooltip();
   },
 }
</script>

// scoped 表示局部的 css
<style lang="scss" scoped>
  .striped {
    background-color: #f6f6f630;
  }
</style>

5.6 serverStatus.vue
//serverStatus.vue
<template>
  <div class="col-xs-12 col-sm-6">
    <p>服务器状:{{statusStr}}</p>
    <hr>
    <button @click="changeStatus">转换</button>
  </div>
</template>

<script>
  export default {
    computed: {
      statusStr: function () {
        return this.status ? '运行中' : '结束';
      }
    },
    data () {
      return {
        status: true
      };
    },
    methods: {
      changeStatus: function () {
        this.status = !this.status;
      }
    }
  };
</script>

<style></style>

如果 eslint 报误,请设置 .eslintrc.js 文件。

module.exports = {
 env: {
  node: true,
  jquery: true
 }
};

最后页面效果如下:
在这里插入图片描述

ztree 高级增删改查 节点直接改

博文 来自: qq_34117825
没有更多推荐了,返回首页