效果图:

先引用,顺序很重要

<script src="~/Content/bootstrap-table/bootstrap-table.min.js"></script>
<link href="~/Content/bootstrap-table/extensions/tree-table/jquery.treetable.css" rel="stylesheet" />
<script src="~/Content/bootstrap-table/extensions/tree-table/jquery.treetable.js"></script>
<link href="~/Content/bootstrap-table/extensions/tree-table/bootstrap-table-tree-table.css" rel="stylesheet" />
<script src="~/Content/bootstrap-table/extensions/tree-table/bootstrap-table-tree-table.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#dgvInfo").bootstrapTable({
method: "GET",
url: "@Url.Action("TreeJson")",
contentType: "application/x-www-form-urlencoded",
datatype: 'json',
undefinedText: '',
striped: false,//隔行 渐变色
classes: "table table-hover",
clickToSelect: true,
queryParams: function (params) {
return {
menu_Name: $.trim($("#menu_Name").val()),
userName: $.trim($("#userName").val())
}
},
onClickRow: function (row, dom, field) {
$("#dgvInfo").bootstrapTable('uncheckAll');
//$("#dgvInfo").bootstrapTable("checkBy", { field: "gid", values: [dom.data('index')] });
}
}); //表格 - 操作 - 事件
window.actionEvents = {
'click #update-selected': function (e, value, row, index) {
SetChildInsurMsg('修改菜单', row)
},
'click #delete-selected': function (e, value, row, index) {
$.ajax({
url: '@Url.Action("DeleteMeun")',
type: 'post',
dataType: 'json',
data: row,
success: function (data) {
console.log(data.message);
searchData();
},
error: function () {
layer.alert('发生错误', {
skin: 'layui-layer-molv',
closeBtn: 0
});
}
});
}
};
}); function funcNmStyle(value, row, index) {
return { css: { "white-space": "nowrap" } };
} function funcNmFormatter(value, row) {
return ' <i class="' + row.menu_Icon + '">' + value+'</i>';
//<a href="@Url.Action("Update")?FunctionID=' + row.gid + '">' + value + '</a>
} function Operations(value, row, index) {
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>';
return str;
} function IsPermissionFormatter(value, row) {
var str = '<input type=checkbox class = "disabled" ' + ((row.menu_IsShow==1) ? 'checked' : '') + ' disabled></input>';
return str;
} function searchData() {
$("#dgvInfo").bootstrapTable('refresh', {
url: '@Url.Action("TreeJson")'
});
} function SetChildInsurMsg(title, rows) {
if (rows == null) {
var selectrow = $("#dgvInfo").bootstrapTable('getSelections')[0];
if (selectrow == null) {
alert("选择父菜单");
return;
}
} layer.open({
type: 2, //因为layer弹出层需要一个页面,所以是iframe弹出层,因此type: 2。
title: title,
shadeClose: true,
shade: 0.4,
area: ['60%', '60%'],
content: '@Url.Action("Info")',
btn: ['确定', '关闭'],
success: function (layero, index) {
if (rows != null) {
var body = layer.getChildFrame('body', index); //巧妙的地方在这里哦,获取layer打开页面的数据
body.contents().find("#gid").val(rows.gid);
body.contents().find("#menu_Num").val(rows.menu_Num);
body.contents().find("#menu_Name").val(rows.menu_Name);
body.contents().find("#menu_Url").val(rows.menu_Url);
body.contents().find("#menu_Icon").val(rows.menu_Icon);
body.contents().find("#menu_Iconi").addClass(rows.menu_Icon);
body.contents().find("#menu_IsShow").val(rows.menu_IsShow);
body.contents().find("#menu_ParentID").val(rows.menu_ParentID);
body.contents().find("#menu_ParentName").val(rows.menu_ParentName);
GetFunction(rows, body);
}
else {
var body = layer.getChildFrame('body', index); //巧妙的地方在这里哦
body.contents().find("#menu_ParentID").val(selectrow.gid);
body.contents().find("#menu_ParentName").val(selectrow.menu_Name);
}
},
yes: function (index) {
var res = window["layui-layer-iframe" + index].callbackdata();
var funs = window["layui-layer-iframe" + index].GetFunctions();
var obj = JSON.parse(res);
var functions = JSON.parse(funs);
if (obj.menu_Name.length > 0) {
if (rows != null) {
updatemenu(obj, functions, index)
} else {
addmenu(obj, functions, index);
}
}
else {
layer.alert('请填写必输项。', {
skin: 'layui-layer-molv',
closeBtn: 0
});
}
},
cancel: function () {
//右上角关闭回调
}
});
} //获取功能
function GetFunction(row, body) {
$.ajax({
url: '@Url.Action("GetMenuFunction")',
type: 'get',
dataType: 'json',
data: {
mid: row.gid
},
success: function (data) {
for (var i = 0; i < data.length; i++) {
body.contents().find("input[value=" + data[i].menuFunction_FunctionID + "]").attr("checked", true)
//.iCheck('check');
}
},
error: function () {
alert("发生错误!");
}
});
}; function addmenu(data, functions, index) {
$.ajax({
url: '@Url.Action("AddMenu")',
type: 'post',
dataType: 'json',
data: {
model: data,
functions: functions
},
success: function (data) {
if (data.type == 1) {
layer.close(index);
searchData();
} else {
alert(data.message);
}
},
error: function () {
alert("发生错误!");
}
});
}; function updatemenu(data, functions, index) {
$.ajax({
url: '@Url.Action("UpdateMenu")',
type: 'post',
dataType: 'json',
data: {
model: data,
functions: functions
},
success: function (data) {
if (data.type == 1) {
layer.close(index);
searchData();
} else {
alert(data.message);
}
},
error: function () {
alert("发生错误!");
}
});
};
</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. Redis For Windows安装及密码

    启动要先开启一个控制台作为服务端,启动服务,然后在重新打开一个控制台,连接服务进行操作. redis-server.exe redis.conf 重新打开一个控制台,刚开始连接服务,因为初始没有密码, ...

  2. springboot配置Filter的两种方法

    一.使用注解1. 假设Filter类的路径为com.sanro.filter @Slf4j @WebFilter(filterName = "authFilter", urlPat ...

  3. Dart对象和类

    /* 面向对象编程(OOP)的三个基本特征是:封装.继承.多态 封装:封装是对象和类概念的主要特性.封装,把客观事物封装成抽象的类,并且把自己的部分属性和方法提供给其他对象调用, 而一部分属性和方法则 ...

  4. SUPERSOCKET.CLIENTENGINE 简单使用

    首先 引用 SuperSocket.ClientEngine.Core.dll和 SuperSocket.ClientEngine.Common.dll 然后 就可以使用ClientEngine了. ...

  5. 安卓终端-Termux

    Termux是一个 Android 终端模拟器以及提供 Linux 环境的应用程序.跟许多其他应用程序不同,无需 root 设备也无需进行设置.它是开箱即用的!它会自动安装好一个最基本的 Linux ...

  6. 【Linux】Gitlab库已损坏前端显示500错误解决方法

    背景: 在进行gitlab数据迁移之后,所有页面正常访问,唯独在访问项目repo地址时,报500错误 1 查看日志: 命令查看: gitlab-ctl tail 或者手动查看:/var/log/git ...

  7. Qt编写自定义控件63-水波效果

    一.前言 几年前就一直考虑过写这个控件了,在9年前用C#的时候,就看到过别人用C#写了个水波效果的控件,挺好玩的,当时看了下代码用的二维数组来存储变换的图像像素数据,自从学了Qt以后,有过几次想要用Q ...

  8. DELPHI XE MYSQL数据库操作类 MYSQLHELPER

    注: 无需odbc配置 {* * MySQL Helper v1.0 * 2015.6.19 * 说明: * 这是一个操作MySQL的类,该类必须和libmysql.dll,dbxmys.dll两个文 ...

  9. PhpStorm的主题和字体设置

    打开PhpStorm,点击File,然后点击Setting 然后 点击Apply,就可以看到主题变化的效果,其次就是来设置字体,先要选取一个样式,然后点击Save As ,然后命名,我选择的是最后一个 ...

  10. yaml中使用harbor

    1.在harbor的ui界面上注册一个账号 姓名:zihao 全名:zhuzihao 密码:Zihao@5tgb 邮箱:15613691030@163.com 2.在需要下载镜像的机器上,同样需要修改 ...