jQuery
可以直接接受,后台返回的数据
Controller方法
需要转换为JSONString
List<AssayItemClassExt> assayItemClassExtList = assayItemClassWebService.selectAllList();
model.addAttribute("assayItemClassExtList", JSON.toJSONString(assayItemClassExtList));
前台接收
var jsonString = '${assayItemClassExtList}';
示例代码
function autoCheckboxTree() {
// 获取JSON
var jsonString = '${assayItemClassExtList}';
var jsonObject = $.parseJSON(jsonString);
// 数据源
var sourceList = [];
// 解析JSON
var tree = $("<div class='tree'></div>");
for (var i = 0; i < jsonObject.length; i++) {
var json = jsonObject[i];
var tier = json.tier;
if (tier == '1') {
var treeModel = "<div class='treeModel'></div>"
var treeOne = "<div class='treeDivStyle treeOneStyle'>" +
"<div class='childrenOneDivStyle'><input class='checkboxTreeStyle' type='checkbox'><a class='treeTextStyle'></a></div></div>";
tree.append(treeModel);
tree.children("div[class='treeModel']").last().append(treeOne);
var control = tree.children("div[class='treeModel']").last().children("div[class='treeDivStyle treeOneStyle']").last().children("div[class='childrenOneDivStyle']");
control.find('a').html(json.name);
control.find('a').attr('title', json.name);
control.find('a').val(json.id);
}
if (tier == '2') {
var treeChildrenModel = "<div class='treeChildrenModel'>";
var treeTwo = "<div class='treeDivStyle treeTwoStyle'>" +
"<div class='childrenOneDivStyle'><input class='checkboxTreeStyle' type='checkbox'><a class='treeTextStyle'></a></div></div>";
tree.children("div[class='treeModel']").last().append(treeChildrenModel);
tree.children("div[class='treeModel']").last().children("div[class='treeChildrenModel']").last().append(treeTwo);
var control = tree.children("div[class='treeModel']").last().children("div[class='treeChildrenModel']").last().children("div[class='treeDivStyle treeTwoStyle']").last().children("div[class='childrenOneDivStyle']");
control.find('a').html(json.name);
control.find('a').attr('title', json.name);
control.find('a').val(json.id);
}
if (tier == '3') {
var treeThree = "<div class='treeDivStyle treeThreeStyle'><div class='childrenOneDivStyle'><input class='checkboxTreeStyle' type='checkbox'><a class='treeTextStyle'></a></div></div>";
tree.children("div[class='treeModel']").last().children("div[class='treeChildrenModel']").last().append(treeThree);
var control = tree.children("div[class='treeModel']").last().children("div[class='treeChildrenModel']").last().children("div[class='treeDivStyle treeThreeStyle']").last().children("div[class='childrenOneDivStyle']");
control.find('a').html(json.name);
control.find('a').attr('title', json.name);
control.find('a').val(json.id);
sourceList.push(json.name);
}
}
var autoInput = "<input class='autoInputStyle' placeholder='模糊搜索'></input>";
var controlTree = "<div class='treeControlStyle'><div class='childrenOneDivStyle'>" +
"<button class='buttonTreeStyle confirmTree'>确认</button>" +
"<button class='buttonTreeStyle closelTree'>关闭</button></div></div>";
$('.treeSelect').append(autoInput).append(tree).append(controlTree);
// 监听
$('.treeSelect').children("input[class='autoInputStyle']").bind('input propertychange', function () {
var value = $('.treeSelect').children("input[class='autoInputStyle']").val();
if (value == '') {
$('.tree').children("div[class='treeModel']").children("div[class='treeChildrenModel']").children('div').css('display', 'none');
} else {
var autoList = [];
for (var i = 0; i < sourceList.length; i++) {
var name = sourceList[i];
var int = name.indexOf(value);
if (int >= 0) {
autoList.push(name);
}
}
$('.tree').children("div[class='treeModel']").children("div[class='treeChildrenModel']").children('div').css('display', 'none');
$('.tree').find("div[class='treeDivStyle treeThreeStyle']").find('div').find('a').each(function () {
var name = $(this).text();
for (var i = 0; i < autoList.length; i++) {
var itemName = autoList[i];
if (name == itemName) {
$(this).parent().parent().css('display', '');
$(this).parent().parent().parent().children("div[class='treeDivStyle treeTwoStyle']").css('display', '');
}
}
})
}
});
}