Layui左樹右表
41745 ワード
html
<div class="layui-fluid">
<div class="layui-row layui-col-space15">
<!-- -->
<div class="layui-col-sm12 layui-col-md4 layui-col-lg3">
<div class="layui-card">
<div class="layui-card-body mini-bar" id="ltTree">
</div>
</div>
</div>
<!-- -->
<div class="layui-col-sm12 layui-col-md8 layui-col-lg9">
<div class="layui-card">
<div class="layui-card-body">
<div class="layui-form toolbar">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label w-auto"> :</label>
<div class="layui-input-inline mr0">
<input id="edtSearch" class="layui-input" type="text" placeholder=" "/>
</div>
</div>
<div class="layui-inline" >
<button class="layui-btn icon-btn" id="btnSearchByCode">
<i class="layui-icon"></i>
</button>
<button class="layui-btn icon-btn" id="btnSearchByName">
<i class="layui-icon"></i>
</button>
</div>
<div class="layui-inline">
<button id="btnAdd" class="layui-btn icon-btn" >
<i class="layui-icon"></i>
</button>
<button id="btnDel" class="layui-btn layui-btn-danger icon-btn" >
<i class="layui-icon"></i>
</button>
</div>
</div>
</div>
<table class="layui-table" id="rtTable" lay-filter="rtTable"></table>
</div>
</div>
</div>
</div>
</div>
js :( )
<script>
layui.use(['layer', 'form', 'table', 'util', 'dtree','admin'], function () {
var $ = layui.jquery;
var layer = layui.layer;
var form = layui.form;
var table = layui.table;
var util = layui.util;
var dtree = layui.dtree;
var admin = layui.admin;
//
var ins1 = function (pid,cloumn,Keyword){
table.render({
elem: '#rtTable',
url: '/dictionary/dictionaryInfoByParentId',
page: true,
cellMinWidth: 100,
cols: [[
{type: 'checkbox'},
{field: 'dictCode', align: 'center', sort: true, title: ' '},
{field: 'dictName', align: 'center', sort: true, title: ' '},
{field: 'dictOrder', align: 'center', sort: true, title: ' '},
{field: 'dictDescription', align: 'center', sort: true, title: ' '},
{align: 'center', align: 'center', toolbar: '#user-table-bar', title: ' ', minWidth: 120}
]],
where: {nodeId: pid,Keyword:Keyword,cloumn:cloumn}
});
}
//
table.on('tool(rtTable)', function (obj) {
var data = obj.data; //
var layEvent = obj.event; // lay-event
if (layEvent === 'edit') { //
showEditModel(data);
//layer.msg(' ');
} else if (layEvent === 'del') { //
var deleteData = new Array();
deleteData.push(data.dictId);
deleteDictionary(deleteData);
}
});
//
$('#btnAdd').click(function () {
var param = dtree.getNowParam(dictTree);
if (param.context) {
admin.putTempData('selectdictionaryId', param.nodeId);
} else {
layer.msg(' ', {icon: 2});
}
showEditModel();
});
//
$('#btnDel').click(function () {
var checkRows = table.checkStatus('rtTable');
if (checkRows.data.length == 0) {
layer.msg(' ', {icon: 2});
} else {
var deletedata = [];
for(var i=0;i<checkRows.data.length;i++){
deletedata.push(checkRows.data[i].dictId);
}
deleteDictionary(deletedata);
}
});
//
$('#btnSearchByCode').click(function () {
var value = $('#edtSearch').val();
ins1("","dict_code",value);
});
//
$('#btnSearchByName').click(function () {
var value = $('#edtSearch').val();
ins1("","dict_name",value);
});
//
var dictTree = dtree.render({
elem: '#ltTree',
url: '/dictionary/dictionaryTreeInfo',
// type: 'all',
initLevel: '1',// , level , , level
//dot: false,
method: 'GET',
request:{nodeId:"0"}// , , url,
});
//
dtree.on('node("ltTree")', function (obj) {
var data = obj.param;
//layer.msg(' :' + data.nodeId + '-' + data.context);
//table.reload('rtTable', {where: {nodeId: data.nodeId}});
ins1(data.nodeId,"","");
});
//
function showEditModel(data) {
admin.putTempData('dictionaryEditData', data);
admin.putTempData('formOk', false);
top.layui.admin.open({
type: 2,
title: data ? ' ' : ' ',
area: ['480px', '492px'],
content: '/dictionary/editForm',
end: function () {
admin.getTempData('formOk') && table.reload('rtTable') //
if(admin.getTempData('formOk')){
dictTree.menubarMethod().refreshTree();
}
}
});
}
function deleteDictionary(data){
var postdata = {"Ids":data};
if(data.constructor==Array||data instanceof Array){
$.post(
"delete",
postdata,
function(result){
if (result.code == 200) {
top.layer.msg(result.msg, {icon: 1});
table.reload('rtTable')&&dictTree.menubarMethod().refreshTree();
} else {
top.layer.msg(result.msg, {icon: 2});
}
},"json"
);
}
}
});
</script>