treegrid树形表格

# Create your views here.def menu_list(request):result = []query = Menu.objects.filter(is_delete=0)if not query:return Noneif query:for item in query:data = {‘id‘: item.id,‘name‘: item.name,‘icon‘: item.icon,‘url‘: item.url,‘pid‘: item.pid,‘type‘: item.type,‘permission‘: item.permission,‘status‘: item.status,‘sort‘: item.sort,‘note‘: item.note,‘create_time‘: str(item.create_time.strftime(‘%Y-%m-%d %H:%M:%S‘)) if item.create_time else None,‘update_time‘: str(item.update_time.strftime(‘%Y-%m-%d %H:%M:%S‘)) if item.update_time else None,}result.append(data)row_dict = json.dumps(result)# print(row_dict)form = MenuForm()content = {"result": row_dict,"form": form}return render(request, "menu/index.html", content)前端代码{% extends ‘public/layout.html‘ %}{% load static %}{% load my_tag %}{% block css %}.breadcrumb {font-size: 20px;background: #ffffff;}{% endblock %}{% block content %}仪表板 v1标题 «1Modal title{% for field in form %}{{ field.label }}:{{ field }}{% endfor %}关闭保存{% endblock %}{% block js %}var $table = $(‘#table‘);{% comment %}var data = JSON.parse(‘[{"id":1,"pid":0,"status":1,"name":"用户管理","permissionValue":"open:user:manage"},‘ +‘{"id":2,"pid":0,"status":1,"name":"系统管理","permissionValue":"open:system:manage"},‘ +‘{"id":3,"pid":1,"status":1,"name":"新增用户","permissionValue":"open:user:add"},‘ +‘{"id":4,"pid":1,"status":1,"name":"修改用户","permissionValue":"open:user:edit"},‘ +‘{"id":5,"pid":1,"status":0,"name":"删除用户","permissionValue":"open:user:del"},‘ +‘{"id":6,"pid":2,"status":1,"name":"系统配置管理","permissionValue":"open:systemconfig:manage"},‘ +‘{"id":7,"pid":6,"status":1,"name":"新增配置","permissionValue":"open:systemconfig:add"},‘ +‘{"id":8,"pid":6,"status":1,"name":"修改配置","permissionValue":"open:systemconfig:edit"},‘ +‘{"id":9,"pid":6,"status":0,"name":"删除配置","permissionValue":"open:systemconfig:del"},‘ +‘{"id":10,"pid":2,"status":1,"name":"系统日志管理","permissionValue":"open:log:manage"},‘ +‘{"id":11,"pid":10,"status":1,"name":"新增日志","permissionValue":"open:log:add"},‘ +‘{"id":12,"pid":10,"status":1,"name":"修改日志","permissionValue":"open:log:edit"},‘ +‘{"id":13,"pid":10,"status":0,"name":"删除日志","permissionValue":"open:log:del"}]‘);{% endcomment %}var data = JSON.parse(‘{{result|safe}}‘)$(function () {//控制台输出一下数据//console.log(data);//初始化表格inittable();});//初始化表格function inittable() {$table.bootstrapTable({data: data,idField: ‘id‘,dataType: ‘jsonp‘,columns: [{field: ‘check‘, checkbox: true, formatter: function (value, row, index) {if (row.check == true) {// console.log(row.serverName);//设置选中return {checked: true};}}},{field: ‘id‘, title: ‘编号‘, sortable: true, align: ‘center‘},{field: ‘name‘, title: ‘名称‘},{field: ‘icon‘, title: ‘图标‘, sortable: true, align: ‘center‘, formatter: ‘iconFormatter‘},{field: ‘type‘, title: ‘类型‘, sortable: true, align: ‘center‘, formatter: ‘typeFormatter‘},{field: ‘sort‘, title: ‘排序‘},{field: ‘status‘, title: ‘状态‘, sortable: true, align: ‘center‘, formatter: ‘statusFormatter‘},{field: ‘permission‘, title: ‘权限值‘},{field: ‘operate‘,title: ‘操作‘,align: ‘center‘,events: operateEvents,formatter: ‘operateFormatter‘},],// bootstrap-table-treegrid.js 插件配置 -- start//在哪一列展开树形treeShowField: ‘name‘,//指定父id列parentIdField: ‘pid‘,onResetView: function (data) {//console.log(‘load‘);$table.treegrid({initialState: ‘collapsed‘,// 所有节点都折叠// initialState: ‘expanded‘,// 所有节点都展开，默认展开treeColumn: 1,// expanderExpandedClass: ‘glyphicon glyphicon-minus‘,//图标样式// expanderCollapsedClass: ‘glyphicon glyphicon-plus‘,onChange: function () {$table.bootstrapTable(‘resetWidth‘);}});//只展开树形的第一级节点$table.treegrid(‘getRootNodes‘).treegrid(‘expand‘);},onCheck: function (row) {var datas = $table.bootstrapTable(‘getData‘);// 勾选子类selectChilds(datas, row, "id", "pid", true);// 勾选父类selectParentChecked(datas, row, "id", "pid")// 刷新数据$table.bootstrapTable(‘load‘, datas);},onUncheck: function (row) {var datas = $table.bootstrapTable(‘getData‘);selectChilds(datas, row, "id", "pid", false);$table.bootstrapTable(‘load‘, datas);},// bootstrap-table-treetreegrid.js 插件配置 -- end});}// 格式化按钮function operateFormatter(value, row, index) {return [‘ 新增‘,‘ 修改‘,‘ 删除‘].join(‘‘);}// 格式化类型function typeFormatter(value, row, index) {if (value === ‘M‘) {return ‘目录‘;}if (value === ‘C‘) {return ‘菜单‘;}if (value === ‘F‘) {return ‘按扭‘;}return ‘-‘;}function iconFormatter(value, row, index) {console.log(value)return ‘‘}// 格式化状态function statusFormatter(value, row, index) {if (value === 1) {return ‘正常‘;} else {return ‘锁定‘;}}//初始化操作按钮的方法window.operateEvents = {‘click .MenuOfadd‘: function (e, value, row, index) {add(row.id, row.name);},‘click .MenuOfdelete‘: function (e, value, row, index) {del(row.id);},‘click .MenuOfedit‘: function (e, value, row, index) {ｕｐｄａｔｅ(row.id);}};/** * 选中父项时，同时选中子项 * @param datas 所有的数据 * @param row 当前数据 * @param id id 字段名 * @param pid 父id字段名 */function selectChilds(datas, row, id, pid, checked) {for (var i in datas) {if (datas[i][pid] == row[id]) {datas[i].check = checked;selectChilds(datas, datas[i], id, pid, checked);};}}function selectParentChecked(datas, row, id, pid) {for (var i in datas) {if (datas[i][id] == row[pid]) {datas[i].check = true;selectParentChecked(datas, datas[i], id, pid);};}}function test() {var selRows = $table.bootstrapTable("getSelections");if (selRows.length == 0) {alert("请至少选择一行");return;}var postData = "";$.each(selRows, function (i) {postData += this.id;if (i < selRows.length - 1) {postData += "， ";}});alert("你选中行的 id 为：" + postData);}function add(id, name) {// alert("add 方法 , id = " + name);//$(‘#myModal‘).modal(‘show‘);//$(‘#myModalLabel‘).text("新增菜单")window.location.href = "{% memory_urlrequest ‘menu_add‘ %}" + "?mid=" + id + "&name=" + name}function del(id) {alert("del 方法 , id = " + id);}function ｕｐｄａｔｅ(id) {alert("ｕｐｄａｔｅ 方法 , id = " + id);}{% endblock %}效果