版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/panhaigang123/article/details/80293339
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>tree.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 引入jquery -->
<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="themes/icon.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
//点击树结构的叶子节点把响应的id带上
$(function(){
$("#tt").tree({
onSelect:function(node){
var id=node.id;
//同时并查询该节点下的员工
$("#dg").datagrid("load",{
id:id
})
}
})
})
//查询触发的函数
function queryForm(){
//$("input[name='empname']").val(); 获取的是jQuery对象 要是用jQuery的方法获取值
//使用easyUI的方法获取值
var empname= $("#empid").textbox('getValue');
//解决后台获取数据乱码问题
var name1 = encodeURI(empname);
//这个查询方式=====通过#dg===queryEmp?ename=empname
$('#dg').datagrid('load',{
//======easyui所有的方法调用 控件对象.控件名称('方法名','方法参数')
ename:name1
});
}
//添加toolbar工具栏
$(function(){
//查询树结构的下拉框
$('#ct,#cc').combotree({
url:'queryDept11',
valueField:'id',
textField:'text'
});
$("#dg").datagrid({
toolbar:[{
iconCls:'icon-insert',
text:'新增',
onClick:function(){
$("#z").window('open');
}
},{
iconCls:'icon-edit',
text:'修改',
onClick:function(){
var selectedRow=$("#dg").datagrid("getSelected");
if(selectedRow==null){
$.messager.alert('提示消息','请选择数据');
return;
}
$("#w").window('open');
//把旧值带上 div里的name值与表单中的field字段值一致就可以自动带上
$("#ff").form('load',selectedRow)
}
},{
iconCls:'icon-remove',
text:'删除',
onClick:function(){
//获取当前选中的行 一整行的数据都可以获取
var selectedRow=$("#dg").datagrid("getSelections"); //删除多行数据
if(selectedRow==null){
$.messager.alert('提示消息','请选择数据');
return;
}
var falg;
for(var i=0;i<selectedRow.length;i++){
if(i==0){
falg=(selectedRow[i].id); //获取删除行数据的id
}else{
falg+=","+selectedRow[i].id;
}
}
//var sid=selectedRow.empno;
$.ajax({
url:'deleteEmp2/'+falg,
method:'POST',
dataType:'json',
data:'_method=delete',
success:function(msg){
if(msg.code==1){
queryForm()
$.messager.alert('提示消息','删除成功');
}else{
$.messager.alert('错误消息',msg.message);
}
}
});
}
}]
})
})
//修改的方法
function submitUpdateForm(){
var selectedRow=$("#dg").datagrid("getSelected");
$('#ff').form('submit',{
url:'updateEmp2/'+selectedRow.id,
success: function(msg){
msg=JSON.parse(msg);
if(msg.code==1){
queryForm()
$.messager.alert('提示消息','修改成功');
$("#w").window('close');
}else{
$.messager.alert('错误消息',msg.message);
}
}
})
}
//修改重置
function clearUpdateForm(){
$('#ff').form('clear');
}
//新增的方法
function submitinsertForm(){
$('#zz').form('submit',{
url:'saveEmp2',
success: function(msg){
msg=JSON.parse(msg);
if(msg.code==1){
queryForm()
$.messager.alert('提示消息','新增成功');
$("#z").window('close');
}else{
$.messager.alert('错误消息',msg.message);
}
}
})
}
//新增重置
function clearinsertForm(){
$('#zz').form('clear');
}
</script>
</head>
<body style="margin: 1px">
<!-- 布局 -->
<div class="easyui-layout" data-options="fit:true" style="mapping">
<!-- 西部 -->
<div data-options="region:'west',split:true" title="west" style="width:15%;">
<!-- 引入树结构 -->
<ul id="tt" class="easyui-tree" data-options="url:'queryDept11'"></ul>
</div>
<!-- 中部 -->
<div data-options="region:'center',split:true" title="center" style="width:100px;">
员工姓名：<input id="empid" class="easyui-textbox" type="text" name="empname" data-options="required:true"></input>
<a href="javascript:void(0)" style="width:50px" class="easyui-linkbutton" onclick="queryForm()">查询</a>
<div style="height:5px"></div>
<table id="dg" class="easyui-datagrid" title="员工信息" style="width:600px;height:250px"
iconCls="icon-save" pagination="true" pagination="true" toolbar="#td"
data-options="height:'auto',singleSelect:false,collapsible:true,url:'queryEmp2',method:'get',pagination:true,rownumbers:true
">
<thead>
<tr>
<!-- 引入复选框 -->
<th field="ck" checkbox="true"></th>
<th data-options="field:'id',width:80">员工编号</th>
<th data-options="field:'ename',width:100">员工姓名</th>
<th data-options="field:'sal',width:80">薪水</th>
</tr>
</thead>
</table>
</div>
</div>
<!-- 修改的div -->
<!-- closed:true隐藏 -->
<div id="w" class="easyui-window" title="修改员工信息" data-options="iconCls:'icon-save',closed:true" style="width:500px;height:300px;padding:5px;">
<form id="ff" method="post">
<input type="hidden" name="_method" value="put">
<table cellpadding="5">
<tr>
<td>员工姓名:</td>
<td><input class="easyui-textbox" type="text" name="ename" data-options="required:true" ></input></td>
</tr>
<tr>
<td>薪水:</td>
<td><input class="easyui-textbox" type="text" name="sal" data-options="required:true"></input></td>
</tr>
<tr>
<td>所属部门:</td>
<td><input id="cc" name="deptid" value="" style="width: 173px"></td>
</tr>
</table>
</form>
<div style="text-align:center;padding:5px">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitUpdateForm()">保存</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearUpdateForm()">重置</a>
</div>
</div>
<!-- 新增的div -->
<div id="z" class="easyui-window" title="增加员工信息" data-options="iconCls:'icon-save',closed:true" style="width:500px;height:300px;padding:5px;">
<form id="zz" method="post">
<table cellpadding="5">
<tr>
<td>员工姓名:</td>
<td><input class="easyui-textbox" type="text" name="ename" data-options="required:true,missingMessage:'请输入用户名'" ></input></td>
</tr>
<tr>
<td>员工薪水:</td>
<td><input class="easyui-textbox" type="text" name="sal" data-options="required:true" ></input></td>
</tr>
<tr>
<td>所属部门:</td>
<td><input id="ct" name="deptid" value="" style="width: 173px"></input></td>
</tr>
</table>
</form>
<div style="text-align:center;padding:5px">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitinsertForm()">保存</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearinsertForm()">重置</a>
</div>
</div>
</body>
</html>TreeNode实体类
package cn.et.food.entity;
import java.util.ArrayList;
import java.util.List;
public class TreeNode {
//节点id，对加载远程数据很重要
private int id;
//显示节点文本 节点的名字
private String text;
//节点的状态 默认为open（打开） 这里设为关闭
private String state="closed";
//存放节点
private List<TreeNode> deptList=new ArrayList<TreeNode>();
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public String getState() {
return state;
}
public void setState(String state) {
this.state = state;
}
public List<TreeNode> getDeptList() {
return deptList;
}
public void setDeptList(List<TreeNode> deptList) {
this.deptList = deptList;
}
}service实现类
package cn.et.food.service.impl;
import java.io.UnsupportedEncodingException;
import java.net.URLDecoder;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.apache.ibatis.session.RowBounds;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import cn.et.food.dao.Dept1Mapper;
import cn.et.food.dao.Emp2Mapper;
import cn.et.food.entity.Dept1;
import cn.et.food.entity.Dept1Example;
import cn.et.food.entity.Emp2;
import cn.et.food.entity.Emp2Example;
import cn.et.food.entity.TreeNode;
import cn.et.food.service.Dept1Service;
import cn.et.food.utils.PageTools;
@Service
public class Dept1ServiceImpl implements Dept1Service {
@Autowired
Dept1Mapper dept;
@Autowired
Emp2Mapper emp;
/* (non-Javadoc)
* @see cn.et.food.service.impl.EmpService#queryEmp(java.lang.String)
*/
public List<TreeNode> queryTreeNode(Integer id){
Dept1Example de=new Dept1Example();
de.createCriteria().andPidEqualTo(id);
List<Dept1> deptlist=dept.selectByExample(de);
List<TreeNode> treelist=new ArrayList<TreeNode>();
for(Dept1 d:deptlist){
TreeNode tn=new TreeNode();
tn.setId(d.getId());
tn.setText(d.getDname());
//判断此节点下是否还有子节点（此方法有点递归的意思）
if(queryTreeNode(d.getId()).size()==0){
tn.setState("open");
}
treelist.add(tn);
}
return treelist;
}
//查询子节点下的员工
public PageTools queryEmp2(Integer id,String ename,Integer page,Integer rows){
Emp2Example ee=new Emp2Example();
if(id!=null){
ee.createCriteria().andDeptidEqualTo(id);
}
//查询总记录
int total=queryEmpCount(ee);
String name1 = null;
if(ename==null||ename==""){
}else{
try {
//解决乱码问题
name1 = URLDecoder.decode(ename, "UTF-8");
} catch (UnsupportedEncodingException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
if(name1==null){
name1="";
}
ee.createCriteria().andEnameLike("%"+name1+"%");
/**
* page 当前页
* queryEmpCount(ename) 总记录数
* rows 每页显示的条数
*/
PageTools pts=new PageTools(page,total,rows);
//传入开始位置 和 每行显示的条数
RowBounds rb=new RowBounds(pts.getStartIndex()-1, rows);
//需要传入一个example和rowBounds对象
List<Emp2> list=emp.selectByExampleWithRowbounds(ee, rb);
pts.setRows(list);
return pts;
}
//查询数据库的总记录数
public int queryEmpCount(Emp2Example ee){
return emp.countByExample(ee);
}
//部门的下拉列表
public List<Map> queryDept1(){
List<Map> l=new ArrayList<Map>();
Dept1Example de=new Dept1Example();
List<Dept1> list=dept.selectByExample(de);
for(Dept1 d:list){
Map map=new HashMap();
map.put("id", d.getId());
map.put("text", d.getDname());
l.add(map);
}
return l;
}
}controller层
package cn.et.food.controller;
import java.util.List;
import java.util.Map;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import cn.et.food.entity.Dept1;
import cn.et.food.entity.TreeNode;
import cn.et.food.service.Dept1Service;
import cn.et.food.utils.PageTools;
@Controller
public class Dept1Controller {
@Autowired
Dept1Service dept1;
//节点
@ResponseBody
@RequestMapping("queryDept11")
public List<TreeNode> queryDept1(Integer id){//参数id写死 界面默认会传入名为id的参数
//如果id没有传 默认就查根节点
if(id==null){
id=0;
}
return dept1.queryTreeNode(id);
}
//查询叶子节点的数据
@ResponseBody
@RequestMapping("queryEmp2")
public PageTools queryEmp(Integer id,String ename,Integer page,Integer rows){
return dept1.queryEmp2(id,ename,page,rows);
}
//下拉框
@ResponseBody
@RequestMapping("queryDept")
public List<Map> queryDept(){
return dept1.queryDept1();
}
@ResponseBody
@RequestMapping(value="q/{a}")
public String q(@PathVariable Integer a,Dept1 d){
System.out.println("==========="+a);
System.out.println(d.getPid());
return null;
}
}效果图
