html 获取 form datagrid,DataGrid4.html

部门管理

class="layui-icon">添加部门

class="layui-icon">刷新

class="layui-icon">展开

class="layui-icon">折叠

style="display: inline-block;width: 140px;height: 30px;line-height: 30px;margin-left:20px;" />

搜索

ဆ清除

var treeTable;

layui.config({

base: '../lib/layui_ext/'

}).extend({

treeTable: 'treetable/treeTable'

}).use(['treeTable'], function () {

treeTable = layui.treeTable;

treeTable.on('tool(test)', function (obj) {

if (obj.event == 'add') {

hg.open('添加部门', '/Depart/Create/' + obj.data.id, 580, 260);

}

if (obj.event == 'edit') {

hg.open('编辑部门', '/Depart/Edit/' + obj.data.id, 580, 300);

}

if (obj.event == 'del') {

hg.confirm('确定删除[' + obj.data.departName + ']吗?', function () {

$.ajax({

url: '/Depart/Delete',

data: {

id: obj.data.id

},

type: 'POST',

success: function (result) {

if (result.success) {

hg.msghide("删除成功！");

//本地移除数据

layui.each(data, function (i, d) {

if (d.id == obj.data.id) {

data.splice(i, 1);

return false;

}

});

init(data);

} else {

hg.msg(result.msg);

}

},

error: function () {

hg.msg("网络请求失败！");

}

});

});

}

});

});

var data = [];

$(document).ready(function () {

request();

});

function request() {

// hg.request('/Depart/GetQueryList', function (result) {

// data = result.data;

// init(data);

// });

//模拟获取后台数据

setTimeout(function(){

var result = {"code":0,"msg":null,"count":4,"data":[{"id":1,"departName":"2020\u7EA7","deptType":0,"gradeId":null,"deptTypeName":"\u5E74\u7EC4","gradeName":null},{"id":2,"departName":".net core \u57FA\u7840\u73ED","deptType":1,"gradeId":1,"deptTypeName":"\u73ED\u7EA7","gradeName":"2020\u7EA7"},{"id":3,"departName":".net core \u7CBE\u82F1\u73ED","deptType":1,"gradeId":1,"deptTypeName":"\u73ED\u7EA7","gradeName":"2020\u7EA7"},{"id":4,"departName":"java EE \u57FA\u7840\u73ED","deptType":1,"gradeId":1,"deptTypeName":"\u73ED\u7EA7","gradeName":"2020\u7EA7"}]};

data = result.data;

init(data);

}, 500);

}

var insTb;

function init(data) {

insTb = treeTable.render({

elem: '#test',

height: 'full-180',

text: {

none: '

暂无数据

'

},

data: data,

tree: {

iconIndex: 0,

isPidData: true,

idName: 'id',

pidName: 'gradeId',

arrowType: 'arrow2',

getIcon: function (item) {

if (item.children != null && item.children.length > 0) {

return '';

} else {

return '';

}

}

},

cols: [{

field: 'id',

title: '部门编号',

width: 400

},

{

field: 'departName',

title: '部门名称',

width: 200

},

{

field: 'deptTypeName',

title: '部门类别',

width: 120

},

{

align: 'center',

title: '操作',

templet: function (item) {

var btns = '';

if (item.deptType == 0) {

btns = btns +

'添加';

} else {

btns = btns +

'添加';

}

btns = btns + '编辑';

if (item.children != null && item.children.length > 0) {

btns = btns +

'删除';

} else {

btns = btns +

'删除';

}

return btns;

}

}

],

style: 'margin-top:0;',

done: function () {}

});

insTb.expandAll();

}

// 全部展开

$('.open-all').click(function () {

insTb.expandAll();

});

// 全部折叠

$('.close-all').click(function () {

insTb.foldAll();

});

//刷新

$('.refresh').click(function () {

request();

});

//搜索

$('#btnSearch').click(function () {

var keywords = $('#edtSearch').val();

if (keywords) {

insTb.filterData(keywords);

} else {

insTb.clearFilter();

}

});

//清除

$('#btnClearSearch').click(function () {

$('#edtSearch').val("");

insTb.clearFilter();

});

$('#btnAdd').click(function () {

hg.open('添加部门', '/Depart/Create/0', 580, 260);

});

//通过table定义reload刷新列表,update本地填充一条数据

var TABLE = function () {

return {

reload: function () {

request();

},

update: function (d) {

var model = $.parseJSON(d);

var up = false;

layui.each(data, function (i, d) {

if (d.id == model.id) {

data[i] = model;

up = true;

return false;

}

});

up || data.push(model);

init(data);

}

}

}

var table = new TABLE();

一键复制

编辑

Web IDE

原始数据

按行查看

历史