html：
<div class="white-box">
<div>
<div style="width: calc(100% - 65px); float: left">
<span class="jp-input-search jp-input-affix-wrapper "
style="margin-bottom: 5px;"> <input id="search_q"
placeholder="${i18n('common.search')}..." class="jp-input"
type="text"> <span class="jp-input-suffix"> <i
class="jp-icon jp-icon-search jp-input-search-icon"></i>
</span>
</span>
</div>
<div style="width: 50px; float: right">
<button class="jp-btn jp-btn-primary"
οnclick="jp.openSaveDialog('${i18n('material.AddMaterialType')}', '${ctx}/warehouse/basic/materialtype/materialType/form/add','800px', '500px')">
<i class="fa fa-plus"></i>
</button>
</div>
</div>
<div id="materialTypejsTree"
style="height: 710px; width: 100%; overflow: scroll;"
class="jstree jstree-1 jstree-default"></div>
</div>
前臺js：
<script>
$(document).ready(function() {
var to = false;
$('#search_q').keyup(function () {
if(to) { clearTimeout(to); }
to = setTimeout(function () {
var v = $('#search_q').val();
$('#materialTypejsTree').jstree(true).search(v);
}, 250);
});
$('#materialTypejsTree').jstree({
'core' : {
"multiple": false,
"animation": 0,
"themes": {"icons": true, "stripes": false,"ellipsis":false,"stripes": false},
"expand_selected_onload": false, //打開異步加載
'data' : {
"url" : "${ctx}/warehouse/basic/materialtype/materialType/asytreeData",
"dataType" : "json" ,
'data' : function (node) {
return { 'id' : node.id };
}
}
},
"conditionalselect" : function (node, event) {
return false;
},
'plugins': ["contextmenu", 'types', 'wholerow', "search"],
"contextmenu": {
"items": function (node) {
var tmp = $.jstree.defaults.contextmenu.items();
delete tmp.create.action;
delete tmp.rename.action;
tmp.rename = null;
tmp.create = {
"label": "${i18n('material.AddSubordinateMaterialType')}",
"action": function (data) {
var inst = jQuery.jstree.reference(data.reference),
obj = inst.get_node(data.reference);
jp.openSaveDialog('${i18n('material.AddSubordinateMaterialType')}', '${ctx}/warehouse/basic/materialtype/materialType/form/edit?parent.id=' + obj.id + "&parent.name=" + obj.text, '800px', '500px');
}
};
tmp.remove = {
"label": "${i18n('material.DeleteMaterialType')}",
"action": function (data) {
var inst = jQuery.jstree.reference(data.reference),
obj = inst.get_node(data.reference);
jp.confirm('${i18n('material.MessageDelete')}', function(){
jp.loading();
$.get("${ctx}/warehouse/basic/materialtype/materialType/delete?id="+obj.id, function(data){
if(data.success){
$('#materialTypejsTree').jstree("refresh");
jp.success(data.msg);
}else{
jp.error(data.msg);
}
})
});
}
}
tmp.ccp = {
"label": "${i18n('material.EditMaterialType')}",
"action": function (data) {
var inst = jQuery.jstree.reference(data.reference),
obj = inst.get_node(data.reference);
var parentId = inst.get_parent(data.reference);
var parent = inst.get_node(parentId);
jp.openSaveDialog('${i18n('material.EditMaterialType')}', '${ctx}/warehouse/basic/materialtype/materialType/form/edit?id=' + obj.id, '800px', '500px');
}
}
return tmp;
}
},
"types":{
'default' : { 'icon' : 'fa fa-folder-o' },
'1' : {'icon' : 'fa fa-home'},
'2' : {'icon' : 'fa fa-umbrella' },
'3' : { 'icon' : 'fa fa-group'},
'4' : { 'icon' : 'fa fa-file-text-o' }
}
}).bind("activate_node.jstree", function (obj, e) {//綁定事件
var node = $('#materialTypejsTree').jstree(true).get_selected(true)[0];
var opt = {
silent: true,
query:{
'materialType.id':node.id
}
};
$("#materialTypeId").val(node.id);
$("#materialTypeName").val(node.text);
$('#materialTable').bootstrapTable('refresh',opt);
}).on('loaded.jstree', function() {
$("#materialTypejsTree").jstree('close_all');//close_all
});
});
function refreshTree() {
$('#materialTypejsTree').jstree("refresh");
}
</script>
後臺：
@ResponseBody
@RequestMapping(value = "asytreeData")
public List<Map<String, Object>> asytreeData(@RequestParam(required = false) String extId, String id,
HttpServletResponse response) {
List<Map<String, Object>> mapList = Lists.newArrayList();
if (id.equals("#")) {//頂級物資類型
MaterialType materialType = materialTypeService.findUniqueByProperty("parent_id", '#');
if (materialType != null) {
Map<String, Object> map = Maps.newHashMap();
map.put("id", materialType.getId());
if("en_US".equals(UserUtils.getCache("I18N_LANGUAGE_SESSION"))){
map.put("text", "Please select the type of material");
}else{
map.put("text", materialType.getTypeCode()+"-"+materialType.getName());
}
map.put("children", true);
mapList.add(map);
}
} else {//第二級以後的物資類型
MaterialType materialType = new MaterialType();
materialType.setParent(new MaterialType(id));
List<MaterialType> list = materialTypeService.findList(materialType);
for (int i = 0; i < list.size(); i++) {
MaterialType e = list.get(i);
if (StringUtils.isBlank(extId) || (extId != null && !extId.equals(e.getId())
&& e.getParentIds().indexOf("," + extId + ",") == -1)) {
Map<String, Object> map = Maps.newHashMap();
map.put("id", e.getId());
map.put("text", e.getTypeCode()+"-"+e.getName());
List<Map<String, Object>> hasChildren = Lists.newArrayList();
if(e.getTypeCode().length()==8) {//最後一個類型
map.put("children", false);
}else {
hasChildren = materialTypeService.executeSelectSql("select count(id) as num from inv_bas_material_type where parent_id='"+e.getId()+"'");
//是否需要判斷當前節點是否有子節點，如果要判斷則放開以下注釋
if(Integer.parseInt(hasChildren.get(0).get("num").toString())>0) {
map.put("children", true);
}else {
map.put("children", false);
}
}
mapList.add(map);
}
}
}
return mapList;
}