效果图:

先引用,顺序很重要

  1. <script src="~/Content/bootstrap-table/bootstrap-table.min.js"></script>
  2. <link href="~/Content/bootstrap-table/extensions/tree-table/jquery.treetable.css" rel="stylesheet" />
  3. <script src="~/Content/bootstrap-table/extensions/tree-table/jquery.treetable.js"></script>
  4. <link href="~/Content/bootstrap-table/extensions/tree-table/bootstrap-table-tree-table.css" rel="stylesheet" />
  5. <script src="~/Content/bootstrap-table/extensions/tree-table/bootstrap-table-tree-table.js"></script>
  1. <script type="text/javascript">
  2. $(document).ready(function () {
  3. $("#dgvInfo").bootstrapTable({
  4. method: "GET",
  5. url: "@Url.Action("TreeJson")",
  6. contentType: "application/x-www-form-urlencoded",
  7. datatype: 'json',
  8. undefinedText: '',
  9. striped: false,//隔行 渐变色
  10. classes: "table table-hover",
  11. clickToSelect: true,
  12. queryParams: function (params) {
  13. return {
  14. menu_Name: $.trim($("#menu_Name").val()),
  15. userName: $.trim($("#userName").val())
  16. }
  17. },
  18. onClickRow: function (row, dom, field) {
  19. $("#dgvInfo").bootstrapTable('uncheckAll');
  20. //$("#dgvInfo").bootstrapTable("checkBy", { field: "gid", values: [dom.data('index')] });
  21. }
  22. });
  23.  
  24. //表格 - 操作 - 事件
  25. window.actionEvents = {
  26. 'click #update-selected': function (e, value, row, index) {
  27. SetChildInsurMsg('修改菜单', row)
  28. },
  29. 'click #delete-selected': function (e, value, row, index) {
  30. $.ajax({
  31. url: '@Url.Action("DeleteMeun")',
  32. type: 'post',
  33. dataType: 'json',
  34. data: row,
  35. success: function (data) {
  36. console.log(data.message);
  37. searchData();
  38. },
  39. error: function () {
  40. layer.alert('发生错误', {
  41. skin: 'layui-layer-molv',
  42. closeBtn: 0
  43. });
  44. }
  45. });
  46. }
  47. };
  48. });
  49.  
  50. function funcNmStyle(value, row, index) {
  51. return { css: { "white-space": "nowrap" } };
  52. }
  53.  
  54. function funcNmFormatter(value, row) {
  55. return ' <i class="' + row.menu_Icon + '">' + value+'</i>';
  56. //<a href="@Url.Action("Update")?FunctionID=' + row.gid + '">' + value + '</a>
  57. }
  58.  
  59. function Operations(value, row, index) {
  60. var str = '<button type="button" id="update-selected" class="btn btn-primary btn-sm"><i class="fa fa-edit"></i>修改</button>&nbsp;&nbsp;<button type="button" id="delete-selected" class="btn btn-danger btn-sm"><i class="fa fa-trash-o"></i>删除</button>';
  61. return str;
  62. }
  63.  
  64. function IsPermissionFormatter(value, row) {
  65. var str = '<input type=checkbox class = "disabled" ' + ((row.menu_IsShow==1) ? 'checked' : '') + ' disabled></input>';
  66. return str;
  67. }
  68.  
  69. function searchData() {
  70. $("#dgvInfo").bootstrapTable('refresh', {
  71. url: '@Url.Action("TreeJson")'
  72. });
  73. }
  74.  
  75. function SetChildInsurMsg(title, rows) {
  76. if (rows == null) {
  77. var selectrow = $("#dgvInfo").bootstrapTable('getSelections')[0];
  78. if (selectrow == null) {
  79. alert("选择父菜单");
  80. return;
  81. }
  82. }
  83.  
  84. layer.open({
  85. type: 2, //因为layer弹出层需要一个页面,所以是iframe弹出层,因此type: 2。
  86. title: title,
  87. shadeClose: true,
  88. shade: 0.4,
  89. area: ['60%', '60%'],
  90. content: '@Url.Action("Info")',
  91. btn: ['确定', '关闭'],
  92. success: function (layero, index) {
  93. if (rows != null) {
  94. var body = layer.getChildFrame('body', index); //巧妙的地方在这里哦,获取layer打开页面的数据
  95. body.contents().find("#gid").val(rows.gid);
  96. body.contents().find("#menu_Num").val(rows.menu_Num);
  97. body.contents().find("#menu_Name").val(rows.menu_Name);
  98. body.contents().find("#menu_Url").val(rows.menu_Url);
  99. body.contents().find("#menu_Icon").val(rows.menu_Icon);
  100. body.contents().find("#menu_Iconi").addClass(rows.menu_Icon);
  101. body.contents().find("#menu_IsShow").val(rows.menu_IsShow);
  102. body.contents().find("#menu_ParentID").val(rows.menu_ParentID);
  103. body.contents().find("#menu_ParentName").val(rows.menu_ParentName);
  104. GetFunction(rows, body);
  105. }
  106. else {
  107. var body = layer.getChildFrame('body', index); //巧妙的地方在这里哦
  108. body.contents().find("#menu_ParentID").val(selectrow.gid);
  109. body.contents().find("#menu_ParentName").val(selectrow.menu_Name);
  110. }
  111. },
  112. yes: function (index) {
  113. var res = window["layui-layer-iframe" + index].callbackdata();
  114. var funs = window["layui-layer-iframe" + index].GetFunctions();
  115. var obj = JSON.parse(res);
  116. var functions = JSON.parse(funs);
  117. if (obj.menu_Name.length > 0) {
  118. if (rows != null) {
  119. updatemenu(obj, functions, index)
  120. } else {
  121. addmenu(obj, functions, index);
  122. }
  123. }
  124. else {
  125. layer.alert('请填写必输项。', {
  126. skin: 'layui-layer-molv',
  127. closeBtn: 0
  128. });
  129. }
  130. },
  131. cancel: function () {
  132. //右上角关闭回调
  133. }
  134. });
  135. }
  136.  
  137. //获取功能
  138. function GetFunction(row, body) {
  139. $.ajax({
  140. url: '@Url.Action("GetMenuFunction")',
  141. type: 'get',
  142. dataType: 'json',
  143. data: {
  144. mid: row.gid
  145. },
  146. success: function (data) {
  147. for (var i = 0; i < data.length; i++) {
  148. body.contents().find("input[value=" + data[i].menuFunction_FunctionID + "]").attr("checked", true)
  149. //.iCheck('check');
  150. }
  151. },
  152. error: function () {
  153. alert("发生错误!");
  154. }
  155. });
  156. };
  157.  
  158. function addmenu(data, functions, index) {
  159. $.ajax({
  160. url: '@Url.Action("AddMenu")',
  161. type: 'post',
  162. dataType: 'json',
  163. data: {
  164. model: data,
  165. functions: functions
  166. },
  167. success: function (data) {
  168. if (data.type == 1) {
  169. layer.close(index);
  170. searchData();
  171. } else {
  172. alert(data.message);
  173. }
  174. },
  175. error: function () {
  176. alert("发生错误!");
  177. }
  178. });
  179. };
  180.  
  181. function updatemenu(data, functions, index) {
  182. $.ajax({
  183. url: '@Url.Action("UpdateMenu")',
  184. type: 'post',
  185. dataType: 'json',
  186. data: {
  187. model: data,
  188. functions: functions
  189. },
  190. success: function (data) {
  191. if (data.type == 1) {
  192. layer.close(index);
  193. searchData();
  194. } else {
  195. alert(data.message);
  196. }
  197. },
  198. error: function () {
  199. alert("发生错误!");
  200. }
  201. });
  202. };
  203. </script>

bootstrap的tree使用的更多相关文章

  1. 多层json的构造,取值,还有使用bootstrap的tree view在前端展示的相关问题

    bootstrap-tree view是一款非常好用的插件,它可以添加任意多层节点,效果如下所示: 使用之前需要在HTML页面添加依赖文件: <link href="bootstrap ...

  2. bootstrap的tree控件

    地址:http://runjs.cn/detail/xtte94ls http://runjs.cn/code/xtte94ls

  3. 10+ 最流行的 jQuery Tree 菜单插件

    jstree – jQuery Tree Plugin With HTML & JSON Data jstree is a lightweight and flexible jQuery pl ...

  4. Mega的简单使用

    Table of Contents 1 Mega画树的简单应用 2 fas格式文件的准备 3 用生成的.meg画树 4 生出树的处理 4.1 修改内容,添加标注 4.2 导出 4.3 后面随着学习的进 ...

  5. Flsk-Bootstrap-2

    目录 Flsk-Bootstrap-2 结构 解压Bootstrap 制作基础模板 视图函数 初始文件 启动文件 浏览器 Flsk-Bootstrap-2 参考:Flask 项目中使用 bootstr ...

  6. 【英文文档】 Installing Go from source Go语言官方编译指南 2019.02.27

    Introduction Go is an open source project, distributed under a BSD-style license. This document expl ...

  7. Bootstrap树控件(Tree控件组件)使用经验分享

    前言:很多时候我们在项目中需要用到树,有些树仅仅是展示层级关系,有些树是为了展示和编辑层级关系,还有些树是为了选中项然后其他地方调用选中项.不管怎么样,树控件都是很多项目里面不可或缺的组件之一.今天, ...

  8. 基于bootstrap样式的tree,

    <!doctype html><html lang="zh"><head> <meta charset="UTF-8" ...

  9. BootstrapQ 包Bootstrap tree,dialog等待

    官方网站:http://uikoo9.com/bootstrapQ why 事实上bootstrap已经非常好了,唯一的软肋就是js方面有些薄弱,对照easyui就知道了. 能够非常明显的知道boot ...

随机推荐

  1. linux内核在哪里处理设备树中compatible为"syscon"的节点?

    答: linux内核源码drivers/mfd/syscon.c中的of_syscon_register()接口对regmap_config进行初始化 注: linux内核源码版本为5.1.0

  2. AndoridSQLite数据库开发基础教程(5)

    AndoridSQLite数据库开发基础教程(5) 创建SQLite数据库 使用SQLiteManager创建数据库的操作步骤如下: (1)双击SQLiteManager工具,弹出SQliteMana ...

  3. 为什么说基于TCP的移动端IM仍然需要心跳保活?(转)

    源:https://segmentfault.com/a/1190000006832547 为什么说基于TCP的移动端IM仍然需要心跳保活?

  4. tr -d命令删除与字符无关的符号

    echo "/192.168"| tr -d '/' 结果:192.168

  5. vscode片段

    参考资料 https://blog.csdn.net/maokelong95/article/details/54379046 "狂客注释": { "prefix&quo ...

  6. idea中copyright使用

    1,在idea中找到settings->Editor->copyright->copyright profiles,然后点击+,输入名字,在copyright text中输入模板.然 ...

  7. Mac或者linux系统自动加载python tab补全功能

    因为mac OS属于类unix系统,所以基本和linux系统使用相差不大,只是用户登陆时自动执行环境变量文件的区别 mac系统: ShanedeMBP:login_api shane$ vi ~/.b ...

  8. Python - Django - 添加首页尾页上一页下一页

    添加首页和尾页: views.py: from django.shortcuts import render from app01 import models def book_list(reques ...

  9. box-sizing:border-box 将元素的内边距和边框都设定在宽高内计算

    http://www.w3school.com.cn/cssref/pr_box-sizing.asp box-sizing: content-box|border-box|inherit; 值 描述 ...

  10. Docker快速入门——Docker-Compose

    一.Docker-Compose简介 1.Docker-Compose简介 Docker-Compose项目是Docker官方的开源项目,负责实现对Docker容器集群的快速编排.Docker-Com ...