15 Star 45 Fork 8

蓝色天空 / bootstrap-treegrid

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
README.md 2.03 KB
一键复制 编辑 原始数据 按行查看 历史
蓝色天空 提交于 2020-05-13 14:47 . update README.md.

功能:依赖bootstrap-table实现treegrid,

内容:

  •   1、支持自定义收缩、展开图标;
  •   2、支持自定义父级ID传入,默认ParentId;
  •   3、父级ID最顶层改为0;
  •   4、修改最后子级前的小图标;
  •   5、支持展开、收缩事件;

用法:

<script src="./bootstrap/js/bootstrap.min.js"></script>
<script src="./bootstrap-table/bootstrap-table.min.js"></script>
<script src="./src/bootstrap-treegrid.min.js"></script>

$('#tb').bootstrapTable({
        method: 'post',
        url: '/HR/HrDept/GetList',
        singleSelect: true,//单行选择
        clickToSelect: true,//点击行时自动选择
        striped: true,//是否显示行间隔色
        treeView: true,//是否显示树形视图
        treeId: "DeptID",//定义关键字段来标识树节点
        treeField: "DeptName",//定义树节点字段
        treeParentId: "MasterID", //定义父级ID字段
        treeRootLevel: 1,//树根的级别
        treeCollapseAll: false,//是否全部折叠,默认折叠 
        uniqueId: "DeptID", //每一行的唯一标识,一般为主键列
        columns:
        [
          { field: 'ck', checkbox: true },
          { field: 'DeptID', title: '机构ID'},
          { field: 'MasterID', title: '上级ID', visible: false },
          { field: 'DeptName', title: '机构名称' }
        ]
       });
  • 注意事项:暂无

效果图

效果图

*有用户反馈九级后不再缩进,我试了一下未发现这个问题呀,截图如下: 多级机构

JavaScript
1
https://gitee.com/lds2013/bootstrap-treegrid.git
git@gitee.com:lds2013/bootstrap-treegrid.git
lds2013
bootstrap-treegrid
bootstrap-treegrid
master

搜索帮助