标题： 系统字典 下拉框
系统字典（树结构）
数据库 字典表数据结构
id name parentid value (列字段)
root 平台 null null （父级数据）
id1 仓库 root -1 （父级root的子级数据）
id2 仓位 id1 1 （子级id1的、子级数据）
系统字典表
第一步 把tree树结构查询出来 查询条件tree的id值为null 等于字典表parentid字段 查询系统字典表
第二步 通过sql 把tree树结构查询出来
sql select m. id, m. name, m.parentid ,
Count( 副表p.id) as chilbren
Form 字典表m , left join 字典表(副表) p on m.id=p.parentid
Where m.parentid =m.id(null)
Group by m.id having children >=0 order by m.value
tree树id 的值为null 等于parentid 查询所有数据. 在左连表字典表 主表的m.id =副表的p.parentid
通过cuont函数返回 副表id字段的所有数据(null 不计入) 取别名chilbren
用group by 函数对主表id字段进行分组
在用 having子句 判断 子节点(chilbren) >= 0 (主表父节点value值为-1) 然后正序主表字典值(value字段)
HAVING语句通常与GROUP BY语句联合使用，用来过滤由GROUP BY语句返回的记录。HAVING语句的存在弥补了WHERE关键字不能与聚合函数联合使用的不足。
第三步 把父级(平台)的子级 加载的layui表格
通过tree树的 选中事件获取到父级(平台)的id 查询条件父级id=子级parentid字段 通过layui表格查询方法 (查询系统字典表) 查询到所有子级 铺给layui表格 选中每个树节点()都是拿着当前选中的id 去查出他下面的子节点
第四步 添加节点 ()
1选中父级(平台) 通过tree树选中事件方法 获取到当前父级的id传给jsp添加页面的input框的parentId字段(该input框隐藏) 提交其他参数
2后端方法 添加条件parentid(父级id)==子节点的parentid(字段)
第四步 更新(父级)节点 删除(父级)节点
通过layuig表格 选中方法 获取layui表格选中的当前节点id 通过当前节点id 更新条件当前节点id==系统字典表的id
去后端更新与删除
jsp 加载layui表格 字典表 树节点
<div class="screenBox clear">
<div class="uinn-a16">
<h1>系统字典</h1>
</div>
</div>
<div class="MLBox">
<div class="MLList umar-l16 ub-fv">
<div class="searchBox">
<div class="uinn-a16">
<div class="input-group input-group-sm ub-fh">
</div>
</div>
</div>
<div class="MLtree uinn-l16">
<div>
<ul id="tree"></ul>
</div>
</div>
</div>
</div>
<div class="MLmenuContent">
<div class="ub-fv umar-l16 bc-fff">
<form class="rela" id="searchData">
<div class="container-fluid SearchShow">
<div class="row">
</div>
</div>
<div class="MLTable">
<div class="MLtableHead " id="TreeBtn">
<div class="clear line-32 uinn-b uinn-t16">
<button class="btn btn-primary addright" id="openMsg" οnclick="addBtn()" type="button">添加</button>
<button class="btn btn-primary right" id="opeDelete" type="button" οnclick="delMultiple()">删除</button>
</div>
</div>
<div class="uinn-b16">
<table class="layui-hide" lay-filter="MLTable" id="MLTable"
style="table-layout:fixed"></table>
</div>
</div>
</form>
</div>
</div>
js 查询加载树节点 layui表格
var trdata;
var tableHeight;
var table;
var child; // 选中节点的id
$(function() {
// 滚动条
var tree = $.treeView.init({ //aceTree树封装好的方法
url : "<%=basePath%>/sysdictionary/sysdictionaryMagTree.html",
height : chatHeight()
});
})
var url="<%=basePath%>/sysdictionary/findAllSysdictionary.html";
/*加载表单
*/
layui.use('table', function() {
table = layui.table
tableHeight = tbWindowH();
table.render({
elem : '#MLTable',
id : 'gridTable',
url : url,
//toolbar:'TreeBtn',
cellMinWidth : 160,
height : tableHeight,
cols : [
[ {
type : 'checkbox', //多选/单选 checkbox /radio
fixed : true
},
{type : 'numbers',title : '序号',fixed : true},
{field : 'id',title : 'ID',hide : true},
{field : 'cites',title : 'cites',hide : true},
{field : 'name',title : '名称'},
{field : 'value',title : '值',width : 80},
{field : 'description',title : '描述'},
{field : 'operation',title : '操作',width : 150,
templet : function(d) {
return '<input class="dataThis" type="hidden" value=' + JSON.stringify(d) + '><span οnclick="editClick(\''+d.id+'\')" class="tx-189 shouzhi umar-r16">修改</span><span οnclick="removeClick(\''+d.id+'\')" class="tx-189 shouzhi umar-r16">删除</span>'
}
} ]
],
page : { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
layout : [ 'count', 'prev', 'page', 'next', 'limit', 'skip' ], //自定义分页布局
curr : 1, //设定初始在第 ? 页
groups : 5, //只显示 ?个连续页码
first : '首页', //不显示首页
last : '尾页', //不显示尾页
theme : '#1890FF' //定义颜色-添加class
},
})
$("#opeDelete").hide();//隐藏删除按钮
table.on('checkbox(MLTable)',function(obj){//监听layui表格选中多少条数据
var iChead=0;
$("#MLTable").siblings().find(".layui-table-fixed tbody .laytable-cell-checkbox>input[type='checkbox']").each(function() {
if($(this).is(":checked")) {//判断复选框是否被选中
iChead++;
}
})
if(iChead>1){
$("#opeDelete").show();
}else{
$("#opeDelete").hide();
}
})
/*重置加载表单
*/
window.onresize = function() {
tableResize()
}
})
//多选树节点删除
function delMultiple(){
var checkStatus = table.checkStatus('gridTable');//获取选中 参数
var data = checkStatus.data;
if(data.length<2)
return;
var ids = [];
$.each(data,function(i,row){
ids.push(row.id);
})
removeClick(ids.join(","));
}
/*多选 删除*/
function removeClick(ids) {
window.top.layer.confirm(
'<h2><i class="confirmIcon iconfont icon-cuo alertCuo"></i>确认要删除物料？</h2><div class="umar-t16">确定要删除改物料数据？删除后不可恢复</div>', {
title : false,
skin : 'confirmHint lay-btn-remove red',
area : '437px',
btn : [ '取消', '删除' ]
},
function(index) {
window.top.layer.close(index);
},
function(index) {
var delUrl = "<%=basePath%>/sysdictionary/deleteSysdictionary.html";
$.ajax({
type : 'POST',
url : delUrl,
async: false,
data:{ids:ids},
dataType : 'json',
success : function(result){
if(result==1){
table.reload('gridTable', { //idTest设定的表单Id
where:{}
});
$.layerMsg(1,"删除成功！",1500);
}else
$.layerMsg(2,"删除失败！",1500);
}
})
return false;
});
}
/* 添加按钮 */
function addBtn(){
var parm = {
type: 2,
skin: 'bc-title lay-btn',
title: '添加字典',
closeBtn: 1,
shadeClose: true,//遮罩是否关闭
shade: 0.5,
area: ["800px", "400px"],
content:'<%=basePath%>/jsp/sysdictionary/sysdictionaryEdit.jsp?parentId='+child,
btn: ['取消', '添加'],
yes: function(index, layero){
window.top.layer.close(index);
},
btn2: function(index, layero){
var iframeWin = window.top[layero.find('iframe')[0]['name']];
var formData = iframeWin.formOK();
table.reload('gridTable',{//刷新
where:{}
});
return false;
}
}
windowTop.$sys.layer.open(parm)
}
/*
修改
*/
function editClick(obj) {
var parm = {
type: 2,
skin: 'bc-title lay-btn',
title: '修改字典',
closeBtn: 1,
shadeClose: true,//遮罩是否关闭
shade: 0.5,
area: ["800px", "400px"],
content:'<%=basePath%>/sysdictionary/updateViewSysdictionary.html?id='+obj,
btn: ['取消', '保存'],
yes: function(index, layero){
window.top.layer.close(index);
},
btn2: function(index, layero){
var iframeWin = window.top[layero.find('iframe')[0]['name']];
var formData = iframeWin.formOK();
table.reload('gridTable',{
where:{}
});
return false;
}
}
windowTop.$sys.layer.open(parm)
}
$("#openMsg").hide();//隐藏添加按钮
//选中树节点
$.treeView.onNodeSelected=function(e,data){
$("#openMsg").show();//选中节点 显示按钮
child=data.target.attr.id;//添加子节点参数
table.reload('gridTable',{
where:{parentId:data.target.attr.id}
});
}
</script>
jsp 添加树节点页面 更新树节点
<div class="uinn-l16">
<form class=" form-horizontal" id="submitForm" method="post" action="<%=basePath%>/sysdictionary/saveSysdictionary.html">
<input type="hidden" name="id" id="id" value="${map.id}" >
<input type="hidden" name="parentId" id="parentId" value="${param.parentId eq null ? map.parentid : param.parentId}" />
<%-- <input type="hidden" name="parentId" id="parentId" value="${param.parentId}" /> --%>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 col-sm-12 inputSearchShow">
<div class="row umar-t16 line-32">
<div class="col-md-3 col-sm-3 col-xs-3 tx-r"></div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="input-group input-group-sm ub-fh">
<span class="input-group-addon ">
<span class="widthName over-el">字典名称：</span>
</span>
<input type="text" name="name" id="name" class="form-control ub-fh280" value="${map.name}" placeholder="请输入">
</div>
</div>
</div>
<div class="row umar-t16 line-32">
<div class="col-md-3 col-sm-3 col-xs-3 tx-r"></div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="input-group input-group-sm ub-fh">
<span class="input-group-addon ">
<span class="widthName over-el">字典值：</span>
</span>
<input type="text" name="value" id="value" class="form-control ub-fh280" value="${map.value}" placeholder="请输入">
</div>
</div>
</div><div class="row umar-t16 line-32">
<div class="col-md-3 col-sm-3 col-xs-3 tx-r"></div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="input-group input-group-sm ub-fh">
<span class="input-group-addon ">
<span class="widthName over-el">描述：</span>
</span>
<textarea rows="3" cols="32" name="description" id="description" class="form-control ub-fh280"
>${map.description}</textarea>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<script type="text/javascript">
//提交
function formOK(){
var flag = $("#submitForm").valid();
if(flag){
$("#submitForm").submit();
}
}
submitHandler: function (form) {
$(form).ajaxSubmit(function(data) {
var id=$("#id").val();
if(data.result=="succeed"){
window.top.$sys.layer.closeAll();
$.layerMsg(1,id !=""? "修改成功！": "保存成功",1500);
}else{
$.layerMsg(2,id !=""? "修改失败！":"保存失败",1500);
}
});
}
},false);
</script>
java后端方法
/**
* 系统字典
*
* @author LiuKun
*
*/
@Controller
@RequestMapping("/sysdictionary/")
public class SysdictionaryContoller extends SimpleAction {
/**
* 新增字典信息
* @param request
* @return
*/
@ResponseBody
@RequestMapping("saveSysdictionary")
public Object saveSysdictionary(HttpServletRequest request) {
String id = request.getParameter("id");
String name = request.getParameter("name");
String parentId = request.getParameter("parentId");
String value = request.getParameter("value");
String description = request.getParameter("description");
int result = 0;
HashMap<String, Object> resultMap = new HashMap<String, Object>();
resultMap.put("result", "error");
if (StringUtils.isNotEmpty(id)) { // 修改树节点
HashMap<String, Object> mapVal = new HashMap<String, Object>();
mapVal.put("name", name);
mapVal.put("value", value);
mapVal.put("parentid", parentId);
mapVal.put("description", description);
HashMap<String, Object> map = new HashMap<String, Object>();
map.put("id", id);
result = this.update(map, mapVal, "sysdictionary");
} else {//添加树节点
HashMap<String, Object> map = new HashMap<String, Object>();
map.put("parentid", parentId);
map.put("name", name);
map.put("value", value);
map.put("description", description);
id = this.add(map, "sysdictionary");
result = id.length() > 0 ? 1 : 0;
}
if (result > 0) {
resultMap.put("result", "succeed");
}
return resultMap;
}
/**
* 查询编辑字典数据信息
*
* @param request
* @return
*/
@RequestMapping("updateViewSysdictionary")
public ModelAndView updateViewSysdictionary(HttpServletRequest request) {
ModelAndView model = new ModelAndView("sysdictionary/sysdictionaryEdit");
model.addObject("map", this.findAllSysdictionary(request));
return model;
}
/**
* 删除字典信息
*
* @param request
* @return
*/
@ResponseBody
@RequestMapping("deleteSysdictionary")
public Object deleteSysdictionary(HttpServletRequest request) {
String[] ids = request.getParameter("ids").split(",");
int result=0;
for (int i = 0; i < ids.length; i++) {
ImmutableRecherDatabaeBO bo = new ImmutableRecherDatabaeBO();
bo.addWhereAndEqual("id", ids[i]);
bo.setTablename("sysdictionary");
commandContext.setBatabaseBo(bo);
commandContext.setMethodName("deleteDBDatas");
commandContext.setServiceName("systemCommonService");
ResultBean rs = executeCommandContext();
result=Integer.valueOf(rs.getResult().toString());
}
return result;
}
/**
* 字典管理 tree 把树结构查询出来
*
* @param model
* @param request
* @return
*/
@SuppressWarnings("unchecked")
@ResponseBody
@RequestMapping("sysdictionaryMagTree")
public Object sysdictionaryMagTree(HttpServletRequest request) {
commandContext.clear();
this.initSpringContext("mencom");
ImmutableRecherDatabaeBO bo = new ImmutableRecherDatabaeBO();
HashMap<String, Object> hashMap = new HashMap<String, Object>();
String id = request.getParameter("id");
if (id == null) {
id = null;
}
hashMap.put("PARENTID", id);
bo.setUserCase(0);
bo.addRelationTables("sysdictionary");
bo.setStatement("Sysdictionary.allmySysdictionaryTree", hashMap);
bo.setHighPerformancePage(false);
commandContext.setBatabaseBo(bo);
commandContext.setMethodName("getDBDataVOs");
commandContext.setServiceName("systemCommonService");
ResultBean rs = executeCommandContext();
ArrayList<HashMap<String, Object>> list = (ArrayList<HashMap<String, Object>>) rs.getResult();
return TreeUtil.toTree(list, PublicBeanField.SYSDICTIONARY_NAME, PublicBeanField.SYSDICTIONARY_PARENTID,
PublicBeanField.SYSDICTIONRAY_ID, PublicBeanField.CHILDRENCOUNT);
}
/**
* 字典子节点
*
* @param model
* @param request
* @return
*/
@SuppressWarnings({ "rawtypes"})
@ResponseBody
@RequestMapping("findAllSysdictionary")
public Object findAllSysdictionary(HttpServletRequest request) {
Integer pageNum = request.getParameter("page") == null ? null : Integer.parseInt(request.getParameter("page"));
Integer pageSize = request.getParameter("rows") == null ? null : Integer.parseInt(request.getParameter("rows"));
commandContext.clear();
this.initSpringContext("mencom");
ImmutableRecherDatabaeBO bo = new ImmutableRecherDatabaeBO();
HashMap<String, Object> hashm = new HashMap<String, Object>();
String id = request.getParameter("id");
String parentId = request.getParameter("parentId");
if (StringUtils.isEmpty(parentId) && StringUtils.isEmpty(id)) {
HashMap<String, Object> pageMap = new HashMap<String, Object>();
pageMap.put("total", 0);
pageMap.put("rows", new ArrayList<>());
pageMap.put("records", 0);
return pageMap;
}
hashm.put("ID", id);
hashm.put("PARENTID", parentId);
bo.addRelationTables("sysdictionary");
bo.setStatement("Sysdictionary.allmySysdictionary", hashm);
bo.setHighPerformancePage(false);
commandContext.setBatabaseBo(bo);
commandContext.setServiceName("systemCommonService");
if (pageNum != null) {
commandContext.setMethodObjects(bo, pageNum, pageSize);
commandContext.setMethodName("getDBDataVOs");
ResultBean rs = executeCommandContext();
DatabasePage dbPage = (DatabasePage) rs.getResult();
HashMap<String, Object> map = new HashMap<String, Object>();
map.put("total", Math.ceil((double) dbPage.getTotalCount() / pageSize));
map.put("rows", dbPage.getItems());
map.put("records", dbPage.getTotalCount());
return map;
}
commandContext.setMethodName("getDBDataVO");
ResultBean rs = executeCommandContext();
return rs.getResult();
}
735
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
