使用js方式加载tree下拉树形列表
2017-06-27 11:46
633 查看
后台一次性加载tree所需要的数据:
public ModelAndView queryEqu(HttpServletRequest request,HttpServletResponse response){
try{
String pid = request.getParameter("id");
Map<String,Object> map = null;
List<Map<String, Object>> trees = new ArrayList<Map<String, Object>>();
if("0".equals(pid)){
ConditionParse condParse = new ConditionParse();
//condParse.addCondition("pid", "=", pid);
condParse.addWhereStr();
List<J20804_WzTypeBean> ros =j20804_WzTypeManager.queryJ20804_WzType(condParse);
for (J20804_WzTypeBean wz : ros) {
map = new HashMap<String,Object>();
map.put("id", wz.getId());
map.put("pId", wz.getPid());
map.put("name", wz.getName());
map.put("code", wz.getType());
if(0 == wz.getLeafValue()){
wz.setLeaf(true);
}
if(!wz.isLeaf()){
map.put("isParent", "true");
map.put("childs", queryEqus(wz.getId()));
}
trees.add(map);
}
}
String json = JsonHandler.buildJson(trees,false);
writeJson(response, json);
}catch (Exception e) {
e.printStackTrace();
log.error("J1042_ZBRKGLController中queryEqu异常:"+e.toString());
}
return null;
}
private Object queryEqus(String id) {
Map<String,Object> map = null;
List<Map<String, Object>> trees = new ArrayList<Map<String, Object>>();
ConditionParse condParse = new ConditionParse();
condParse.addCondition("pid", "=", id);
condParse.addWhereStr();
List<J20804_WzTypeBean> ros =j20804_WzTypeManager.queryJ20804_WzType(condParse);
for (J20804_WzTypeBean wz : ros) {
map = new HashMap<String,Object>();
map.put("id", wz.getId());
map.put("pId", wz.getPid());
map.put("name", wz.getName());
map.put("code", wz.getType());
if(0 == wz.getLeafValue()){
wz.setLeaf(true);
}
if(!wz.isLeaf()){
map.put("isParent", "true");
map.put("childs", queryEqus(wz.getId()));
}
trees.add(map);
}
return trees;
}
简单的js加载
html :
<div class="zTreeDemoBackground left">
<input id="wzType" type="text" readonly value="${map.code}" name="wzType" onclick="showMenu()" class="m-wrap span10"/>
</div>
<div id="menuContent" class="menuContent" style="display:none;position:absolute;height:300px; min-width:163px; background-color:white;border:1px solid;overflow-y:auto;overflow-x:auto;top:10px;">
<ul id="treeDemo" class="ztree" ></ul>
</div>
js :
$(document).ready(function(){
loadData();
});
function loadData(){
$.ajax({
url:'wzStorageController.do?method=queryEqu',
type:'POST',
data:{id:"0"},
dataType:'json',
success:function(data) {
zNodes = data;
alert(JSON.stringify(zNodes));
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
}
});
}
var setting = {
view: {
dblClickExpand: false
},
data: {
simpleData: {
enable: true
}
},
callback: {
beforeClick: beforeClick,
onClick: onClick
}
};
function beforeClick(treeId, treeNode) {
var check = (treeNode && !treeNode.isParent);
if (!check) showAlert("info", "请选择详细物资");
return check;
}
function onClick(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
nodes = zTree.getSelectedNodes(),
v = "";
nodes.sort(function compare(a,b){return a.id-b.id;});
for (var i=0, l=nodes.length; i<l; i++) {
v += nodes[i].code + ",";
}
if (v.length > 0 ) v = v.substring(0, v.length-1);
var cityObj = $("#wzType");
cityObj.attr("value", v);
}
function showMenu() {
$("#menuContent").css({left:"300px", top:"50px"}).slideDown("fast");
$("body").bind("mousedown", onBodyDown);
}
function hideMenu() {
$("#menuContent").fadeOut("fast");
$("body").unbind("mousedown", onBodyDown);
}
function onBodyDown(event) {
if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
hideMenu();
}
}
后台:
/**
*
* <p>Description:物资入库树形菜单<p>
* @author 徐磊
* @version 2017年6月26日
* @modifier
* @modifiDate
* <p>modifiContent:<p>
* @param request
* @param response
* @return
*/
public ModelAndView queryEqu(HttpServletRequest request,HttpServletResponse response){
try{
String pid = request.getParameter("id");
Map<String,Object> map = null;
List<Map<String, Object>> trees = new ArrayList<Map<String, Object>>();
if("0".equals(pid)){
ConditionParse condParse = new ConditionParse();
condParse.addWhereStr();
List<J20804_WzTypeBean> ros =j20804_WzTypeManager.queryJ20804_WzType(condParse);
for (J20804_WzTypeBean wz : ros) {
map = new HashMap<String,Object>();
map.put("id", wz.getId());
map.put("pId", wz.getPid());
map.put("name", wz.getName());
map.put("code", wz.getType());
if(0 == wz.getLeafValue()){
wz.setLeaf(true);
}
if(!wz.isLeaf()){
map.put("isParent", "true");
}
trees.add(map);
}
}
String json = JsonHandler.buildJson(trees,false);
writeJson(response, json);
}catch (Exception e) {
e.printStackTrace();
log.error("J1042_ZBRKGLController中queryEqu异常:"+e.toString());
}
return null;
}
public ModelAndView queryEqu(HttpServletRequest request,HttpServletResponse response){
try{
String pid = request.getParameter("id");
Map<String,Object> map = null;
List<Map<String, Object>> trees = new ArrayList<Map<String, Object>>();
if("0".equals(pid)){
ConditionParse condParse = new ConditionParse();
//condParse.addCondition("pid", "=", pid);
condParse.addWhereStr();
List<J20804_WzTypeBean> ros =j20804_WzTypeManager.queryJ20804_WzType(condParse);
for (J20804_WzTypeBean wz : ros) {
map = new HashMap<String,Object>();
map.put("id", wz.getId());
map.put("pId", wz.getPid());
map.put("name", wz.getName());
map.put("code", wz.getType());
if(0 == wz.getLeafValue()){
wz.setLeaf(true);
}
if(!wz.isLeaf()){
map.put("isParent", "true");
map.put("childs", queryEqus(wz.getId()));
}
trees.add(map);
}
}
String json = JsonHandler.buildJson(trees,false);
writeJson(response, json);
}catch (Exception e) {
e.printStackTrace();
log.error("J1042_ZBRKGLController中queryEqu异常:"+e.toString());
}
return null;
}
private Object queryEqus(String id) {
Map<String,Object> map = null;
List<Map<String, Object>> trees = new ArrayList<Map<String, Object>>();
ConditionParse condParse = new ConditionParse();
condParse.addCondition("pid", "=", id);
condParse.addWhereStr();
List<J20804_WzTypeBean> ros =j20804_WzTypeManager.queryJ20804_WzType(condParse);
for (J20804_WzTypeBean wz : ros) {
map = new HashMap<String,Object>();
map.put("id", wz.getId());
map.put("pId", wz.getPid());
map.put("name", wz.getName());
map.put("code", wz.getType());
if(0 == wz.getLeafValue()){
wz.setLeaf(true);
}
if(!wz.isLeaf()){
map.put("isParent", "true");
map.put("childs", queryEqus(wz.getId()));
}
trees.add(map);
}
return trees;
}
简单的js加载
html :
<div class="zTreeDemoBackground left">
<input id="wzType" type="text" readonly value="${map.code}" name="wzType" onclick="showMenu()" class="m-wrap span10"/>
</div>
<div id="menuContent" class="menuContent" style="display:none;position:absolute;height:300px; min-width:163px; background-color:white;border:1px solid;overflow-y:auto;overflow-x:auto;top:10px;">
<ul id="treeDemo" class="ztree" ></ul>
</div>
js :
$(document).ready(function(){
loadData();
});
function loadData(){
$.ajax({
url:'wzStorageController.do?method=queryEqu',
type:'POST',
data:{id:"0"},
dataType:'json',
success:function(data) {
zNodes = data;
alert(JSON.stringify(zNodes));
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
}
});
}
var setting = {
view: {
dblClickExpand: false
},
data: {
simpleData: {
enable: true
}
},
callback: {
beforeClick: beforeClick,
onClick: onClick
}
};
function beforeClick(treeId, treeNode) {
var check = (treeNode && !treeNode.isParent);
if (!check) showAlert("info", "请选择详细物资");
return check;
}
function onClick(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
nodes = zTree.getSelectedNodes(),
v = "";
nodes.sort(function compare(a,b){return a.id-b.id;});
for (var i=0, l=nodes.length; i<l; i++) {
v += nodes[i].code + ",";
}
if (v.length > 0 ) v = v.substring(0, v.length-1);
var cityObj = $("#wzType");
cityObj.attr("value", v);
}
function showMenu() {
$("#menuContent").css({left:"300px", top:"50px"}).slideDown("fast");
$("body").bind("mousedown", onBodyDown);
}
function hideMenu() {
$("#menuContent").fadeOut("fast");
$("body").unbind("mousedown", onBodyDown);
}
function onBodyDown(event) {
if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
hideMenu();
}
}
后台:
/**
*
* <p>Description:物资入库树形菜单<p>
* @author 徐磊
* @version 2017年6月26日
* @modifier
* @modifiDate
* <p>modifiContent:<p>
* @param request
* @param response
* @return
*/
public ModelAndView queryEqu(HttpServletRequest request,HttpServletResponse response){
try{
String pid = request.getParameter("id");
Map<String,Object> map = null;
List<Map<String, Object>> trees = new ArrayList<Map<String, Object>>();
if("0".equals(pid)){
ConditionParse condParse = new ConditionParse();
condParse.addWhereStr();
List<J20804_WzTypeBean> ros =j20804_WzTypeManager.queryJ20804_WzType(condParse);
for (J20804_WzTypeBean wz : ros) {
map = new HashMap<String,Object>();
map.put("id", wz.getId());
map.put("pId", wz.getPid());
map.put("name", wz.getName());
map.put("code", wz.getType());
if(0 == wz.getLeafValue()){
wz.setLeaf(true);
}
if(!wz.isLeaf()){
map.put("isParent", "true");
}
trees.add(map);
}
}
String json = JsonHandler.buildJson(trees,false);
writeJson(response, json);
}catch (Exception e) {
e.printStackTrace();
log.error("J1042_ZBRKGLController中queryEqu异常:"+e.toString());
}
return null;
}
相关文章推荐
- 【百度地图API】如何使用suggestion--下拉列表方式的搜索建议
- 树形列表 jqtree数据 使用
- 关于EasyUI使用tree方法生成树形结构加载两次的问题
- 使用自定义的item、Adapter和AsyncTask、第三方开源框架PullToRefresh联合使用实现自定义的下拉列表(从网络加载图片显示在item中的ImageView)
- 【百度地图API】如何使用suggestion--下拉列表方式的搜索建议
- 使用requireJS加载不符合AMD规范的js文件:shim的使用方式和实现原理
- Web版RSS阅读器(二)——使用dTree树形加载rss订阅分组列表
- html+js+PHP(使用了smarty模板技术)+mysql实现二级动态下拉列表(select)
- datagrid使用本地加载的方式将js得到的json传递到jsp
- Web版RSS阅读器(二)——使用dTree树形加载rss订阅分组列表
- 【毕设资料】 Web版RSS阅读器(二)——使用dTree树形加载rss订阅分组列表
- 百度地图API:如何使用suggestion下拉列表方式的搜索建议
- 发现一个自己容易忽视的错误。空格+checkBOX 使用JS加载下来列表
- SharePoint 2013 中使用JSLink 来改变列表中某个字段或view(视图)的显示方式
- 如何使用suggestion--下拉列表方式的搜索建议
- 【百度地图API】如何使用suggestion--下拉列表方式的搜索建议
- 使用自定义的item、Adapter和AsyncTask、第三方开源框架PullToRefresh联合使用实现自定义的下拉列表(从网络加载图片显示在item中的ImageView)
- 【百度地图API】搜索建议,如何使用suggestion--下拉列表方式的搜索建议
- JQuery条件下使用 JS方式实现百度地图加载数据库中的坐标并实现动态刷新