• bootstrap非常实用的复选框 2020-06-03 23:33:39
    非常实用的复选框,经典、推荐。非常实用的复选框,经典、推荐。
  • bootstrap的树结构插件,包括树结构显示复选框复选框回显功能,在此记录一下实现过的功能,便于以后使用~ 使用方法: 一、首先引用css和js,仅写自己使用的 jquery-1.11.3.min.js、bootstrap-3.3.7.css、...

    bootstrap的树结构插件,包括树结构显示复选框、复选框回显功能,在此记录一下实现过的功能,便于以后使用~

    使用方法:

    一、首先引用css和js,仅写自己使用的

    jquery-1.11.3.min.js、bootstrap-3.3.7.css、bootstrap-3.3.7.js、bootstrap-treeview.js

    不过看别的博客说是这样的区间范围:Bootstrap v3.3.4 (>= 3.0.0) jQuery v2.1.3 (>= 1.9.0)

    参考地址https://blog.csdn.net/security_2015/article/details/79527313

        <script type="text/javascript" th:src="@{/jquery/jquery-1.11.3.min.js}"></script>
        <link rel="stylesheet" type="text/css" th:href="@{/bootstrap/bootstrap-3.3.7/css/bootstrap.css}"></link>
        <link rel="stylesheet" type="text/css" th:href="@{/bootstrap/select/bootstrap-select.min.css}"/>
        <script type="text/javascript" th:src="@{/bootstrap/bootstrap-3.3.7/js/bootstrap.js}"></script>
        <script type="text/javascript" th:src="@{/bootstrap/bootstrap-treeview/js/bootstrap-treeview.js}"></script>
        <script type="text/javascript" th:src="@{/bootstrap/select/bootstrap-select.min.js}"></script>

    二、js和html分开写,先写html页面内容

    html:

    1.定义div,设置树结构
           <div id="tree" style="overflow: auto; margin-left: 0; margin-top: 0;padding-left:170px;"></div>

    2.在js中定义:

    //定义属性,来实现父子级联和全选全不选

    var nodeCheckedSilent = false;
    var nodeUncheckedSilent = false;

    function init(){
        loadMenuTree();//加载树结构
    }

    3.加载的树结构

    function loadMenuTree(){
        $('#tree').treeview({
            data : getTree(), // 实现树形结构的展示树形规则,后续展示实体类属性内容
            levels : 2,
            expandIcon : "glyphicon glyphicon-chevron-right",//图案可以自己选择
            collapseIcon : "glyphicon glyphicon-chevron-down",
            emptyIcon:"glyphicon glyphicon-th-large"
    ,//设置没有子节点的菜单前的图标
            showBorder : false,
            showTags : true,
            highlightSelected : false,
            highlightSearchResults : true,
            selectedBackColor : false,
            showIcon : true,
            multiSelect : 1,
            showCheckbox: 1,//复选框设置,也可以是true
            onNodeChecked: function(event, data) {
                if(nodeCheckedSilent){
                    return;
                }
                nodeCheckedSilent = true;//开始父子节点级联全选全不选
                checkAllParent(data);
                checkAllSon(data);
                nodeCheckedSilent = false;

            },
            onNodeUnchecked : function(event, data) {
                if(nodeUncheckedSilent){
                    return;
                }
                nodeUncheckedSilent = true;//开始父子节点级联全选全不选
                uncheckAllParent(data);
                uncheckAllSon(data);
                nodeUncheckedSilent = false;

            
            }

        });
    }

    4.获取树结构内容,以便于展示树结构,树结构展示的内容

    function getTree() {
        var menus;
        $.ajax({
            async : false,
            url : “获取的树结构的内容”,//自己定义的接口
            type : "post",
            contentType : "application/json;charset=UTF-8",
            dataType : "json",
            data : null,
            error : function(data) {
                alert(data.toString());
            },
            success : function(data) {
                menus = data;
            },
            error:function(data){
                alert("加载失败");
            }
        });
        return menus;
    }

    5.实现父子节点级联和全选全不选:

    //选中全部父节点
    function checkAllParent(data){
        $('#tree').treeview('checkNode',data.nodeId,{silent:true});
        var parentNode = $('#tree').treeview('getParent',data.nodeId);
        if(!("nodeId" in parentNode)){
            return;
        }else{
            checkAllParent(parentNode);
        }
    }
    //取消全部父节点
    function uncheckAllParent(data){
        $('#tree').treeview('uncheckNode',data.nodeId,{silent:true});
        var siblings = $('#tree').treeview('getSiblings', data.nodeId);
        var parentNode = $('#tree').treeview('getParent',data.nodeId);
        if(!("nodeId" in parentNode)) {
            return;
        }
        var isAllUnchecked = true;  //是否全部没选中
        for(var i in siblings){
            if(siblings[i].state.checked){
                isAllUnchecked=false;
                break;
            }
        }
        if(isAllUnchecked){
            uncheckAllParent(parentNode);
        }
     
    }
     
    //级联选中所有子节点
    function checkAllSon(data){
        $('#tree').treeview('checkNode',data.nodeId,{silent:true});
        if(data.nodes!=null&&data.nodes.length>0){
            for(var i in data.nodes){
                checkAllSon(data.nodes[i]);
            }
        }
    }
    //级联取消所有子节点
    function uncheckAllSon(data){
        $('#tree').treeview('uncheckNode',data.nodeId,{silent:true});
        if(data.nodes!=null&&data.nodes.length>0){
            for(var i in data.nodes){
                uncheckAllSon(data.nodes[i]);
            }
        }
    }

    三、下面是树结构要求实现的实体类关系:

        private String id;
        private String parentId;
        private String text;
        private String level;
        private String href;
        
        private String rootId;
        
        private List<TreeMenuFormat> nodes = new ArrayList<TreeMenuFormat>();

    如果要加入回显选中内容,需要加上:

    /**
         * 用于回显(默认选中)
         */
        private static Map<String, Object> stateMap = new HashMap<String, Object>();

        static {
            stateMap.put("checked", true);
        }

        private Map<String, Object> state;

     

    普通的是这些,不过要实现树结构,复选框回显,应该加上一个属性:state,前端的树结构加载的时候会看此节点是否有state:{checked:true}属性,有的话就会自己成选中状态,这样在加载树结构的时候,知道这个节点是选中状态,直接给setstate();就可以给他属性了;

    需要注意的是,给树结构选中的属性是在加载树结构的时候,就给他setstate()属性,不需要请求两次树结构内容

    这样在前端显示出来的界面就是已经有的节点是选中状态了:

     

    树结构前面显示的图标是可以进行变化的,

    放链接,图标:https://v3.bootcss.com/components/

    更改地方,在js中:

    文章参考:

    父子节点全选全不选参考文章https://blog.csdn.net/jiang_2992/article/details/62042028

    修改图标:https://v3.bootcss.com/components/

    自己学习参考文章:

    https://blog.csdn.net/u011550710/article/details/79240368

    https://www.cnblogs.com/chenhtblog/p/8342534.html

    https://blog.csdn.net/u010028869/article/details/44087699

    先这些,后续再补充吧~

    展开全文
  • <p>Here's the html code:</p> <pre><code><Div> <Div ‪#‎btn‬-group> <button value=0><img />...<p>I dont want it to constantly be running....<p>Or...... </div>
  • <!DOCTYPE html> <html> <head> <meta charset="utf-8">...默认的复选框和单选按钮的实例</title> <link rel="stylesheet" href="http://cdn.static.runoob...
  • 实例完成了bootstrap TreeView的各种选择的事件触发,选中后打印出树节点的相关信息,包括单选,全选,父级和定位
  • <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="renderer" content="webkit|ie-comp|ie-stand"> <meta ...
  • 项目中如果使用Thymeleaf模板引擎,需要经常的对下拉框、单选钮、复选框进行数据的动态绑定。下面将介绍如何使用Thymeleaf动态绑定下拉框、单选钮、复选框的数据。 1、使用Thymeleaf动态绑定 1.1Select标签的动态...
  • 引入文件:<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/> <link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/> <script type="text/javascript" src="js/...
  • 在业务系统开发中,对表格记录的查询、分页、排序等处理是非常常见...Bootstrap-table插件提供了非常丰富的属性设置,可以实现查询、分页、排序、复选框、设置显示列、Card view视图、主从表显示、合并列、国际化处...
  • 实例显示了一个简单的带复选框的的树,通过返回的JSON数据来显示复选框是否是选中/不选中状态。例子中没有采用异步的方式展开节点。如果想使用异步方式加载节点,可以参考本站另一片文章来实现此功能,链接地址为:...
  • awesome-bootstrap-checkbox简单使用欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定...
  • 1、定位一组元素webdriver 可以很方便的使用 findElement 方法来定位某个特定的对象,不过有时候我们却需要定位一组对象,这时候就需要使用 findElements 方法。定位一组对象一般用于以下场景: ...
  • bootstrap-multiselect.js多选下拉框初始化时默认选中初始值
  • 点击文字选中checkbox 2015-10-12 11:29:54
    查看实例: test 第一种: 文字必须是label标签内,checkbox的id和标签内的for=""中的名字必须相同. 姓名 密码 第二种: 把文字和checkbox包含在标签内 测试
  • 关于Bootstrap 折叠(Collapse)插件的基础使用见:http://www.runoob.com/bootstrap/bootstrap-collapse-plugin.html 要求: 1、二级菜单中任意一个选中,则一级菜单选中;未选中二级菜单,仅一级菜单的点击不算...
  • ext多选框和单选框 2017-06-16 17:28:16
    Ext.form.field.CheckBox复选框和Ext.form.field.Radio单选框 1、Ext.form.field.CheckBox和Ext.form.field.Radio主要配置项目 配置项 类型 说明 boxLabel String 紧靠复选框的文字描述 boxLabelAlign ...
  • Bootstrap-前端框架 2018-09-14 09:28:36
    Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局、移动设备优先的 WEB 项目。 Bootstrap4 目前是 Bootstrap 的最新版本,是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量...
  • BootstrapTable使用实例 2019-04-29 21:38:45
    一、bootstrapTable简单使用: <link rel="stylesheet" href="./static/libs/bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="./static/libs/bootstrap-table-master/bootstrap-table.css"&...
  • bootstrap-table表格插件之服务器端分页实例Bootstrap Table是基于Bootstrap的轻量级表格插件,只需要简单的配置就可以实现强大的支持固定表头、单复选、排序、分页、搜索以及自定义表头等功能。 因公司的项目需要...
1 2 3 4 5 ... 20
收藏数 627
精华内容 250