关于jstree的一些应用记录
程序员文章站
2022-07-12 13:16:13
...
<input id="optunitid" type="hidden"/>
<input class="form-control input-medium" type="text" id="optunitname" placeholder="所属运营单位" readonly>
<div class="select-treebox selectbox-medium" style="height: 550px;overflow: auto;position: absolute; z-index: 10">
<div id="tree_optunit" class="tree-demo" style="width:12%;float:left;margin-top:2.8%;"></div>
</div>
js:
$(function () {
var selectBox = $(".select-treebox");
$("#optunitname").click(function (event) {
$(this).parent().find(selectBox).toggle();
$(document).one("click",
function () {
$(selectBox).hide();
});
event.stopPropagation();
});
$(selectBox).click(function (event) {
event.stopPropagation();
});
});
$("#tree_optunit").jstree({
"core": {
"themes": {
"responsive": false
},
// so that create works
"check_callback": true,
'data': {
'url': function (node) {
return '${contextPath}/Group/showOptunitTree';
},
'dataType': 'json',
'data': function (node) {
return {'parent': node.id};
}
}
},
"types": {
"default": {
"icon": "fa fa-folder icon-state-warning icon-lg"
},
"file": {
"icon": "fa fa-file icon-state-warning icon-lg"
}
},
"state": {"key": "demo3"},
"plugins": ["html_data", "types"]
}).on("changed.jstree", function (e, data) {
if (data.node != undefined) {
$('#optunitname').val(data.node.text);
$('#optunitid').val(data.node.id);
$('.select-treebox').hide();
}
});
Service:
@Override
public Object showOptunitTree() {
List<OptunitInfo> optunitList =optunitDao.listAllOptunit();
JsTreeJson optunitTree;//城市树
List<JsTreeJson> optunitTreeList = new ArrayList<>();
if (optunitList != null && optunitList.size() > 0) {
optunitTreeList = new ArrayList<>();
for(TOptunit optunit : optunitList){
optunitTree = new JsTreeJson(optunit.getOptunitid().toString(), optunit.getOptunit_name(), null, null, null);
optunitTreeList.add(optunitTree);
}
}
return optunitTreeList;
}
mapper:
<select id="listAllOptunit" resultType="com.sunland.dto.OptunitInfo">
select * from t_optunit
</select>
上一篇: Apollo详解之transform模块
下一篇: Android未读消息小红点实现