Tree的前台解析
先写一个简单的样式
然后，在使用JS拼接Tree
单选
单选带模糊查询
多选
多选带模糊查询
返回数据
后台Controller直接返回list，处理好的list
List<AssayItemClassExt> assayItemClassExtList = assayItemClassWebService.selectAllList();
model.addAttribute("assayItemClassExtList", JSON.toJSONString(assayItemClassExtList));解析代码
<script type="text/javascript">
$(function () {
// 单选
//initTree();
//initTreeControl();
// 多选
//checkboxTree();
//checkboxTreeControl();
// 单选，带查询
//autoInitTree();
//autoInitControlTree();
// 多选，带查询
//autoCheckboxTree();
//autoCheckboxControlTree();
})
// 带查询，多选Tree
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', '');
}
}
})
}
});
}
// 带查询，多选Tree
function autoCheckboxControlTree() {
// 隐藏二级
$('.treeTwoStyle').css('display', 'none');
// 隐藏三级
$('.treeThreeStyle').css('display', 'none');
// checkbox
$('.checkboxTreeStyle').click(function () {
var checkbox = $(this).is(":checked");
if (checkbox == true) {
var divClass = $(this).parent('div').parent('div').attr('class');
if (divClass == 'treeDivStyle treeOneStyle') {
$(this).parent('div').parent('div').parent('div').find('input').prop("checked", true);
var display = $(this).parent('div').parent('div').parent('div').children("div[class='treeChildrenModel']").first().children('div').css('display');
if (display == "none") {
$(this).parent().parent().parent().children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeTwoStyle']").css('display', '');
$(this).parent().parent().parent().children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeThreeStyle']").css('display', '');
} else {
$(this).parent().parent().parent().children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeTwoStyle']").css('display', 'none');
$(this).parent().parent().parent().children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeThreeStyle']").css('display', 'none');
}
}
if (divClass == 'treeDivStyle treeTwoStyle') {
$(this).parent('div').parent('div').parent('div').find('input').prop("checked", true);
var display = $(this).parent('div').parent('div').parent('div').children("div[class='treeDivStyle treeThreeStyle']").first().css('display');
if (display == 'none') {
$(this).parent('div').parent('div').parent('div').children("div[class='treeDivStyle treeThreeStyle']").css('display', '');
} else {
$(this).parent('div').parent('div').parent('div').children("div[class='treeDivStyle treeThreeStyle']").css('display', 'none');
}
var number = 0;
var checkedNumber = 0;
$(this).parent().parent().parent().parent().find("div[class='treeDivStyle treeTwoStyle']").each(function () {
number++;
})
$(this).parent().parent().parent().parent().find("div[class='treeDivStyle treeTwoStyle']").find(':checkbox').each(function () {
if ($(this).is(":checked")) {
checkedNumber++;
}
})
if (number == checkedNumber) {
$(this).parent().parent().parent().parent().children("div[class='treeDivStyle treeOneStyle']").find('input').prop("checked", true);
}
}
if (divClass == 'treeDivStyle treeThreeStyle') {
var number = 0;
var checkedNumber = 0;
$(this).parent().parent().parent().find("div[class='treeDivStyle treeThreeStyle']").each(function () {
number++;
})
$(this).parent().parent().parent().find("div[class='treeDivStyle treeThreeStyle']").find(':checkbox').each(function () {
if ($(this).is(":checked")) {
checkedNumber++;
}
})
if (number == checkedNumber) {
$(this).parent().parent().parent().children("div[class='treeDivStyle treeTwoStyle']").find('input').prop("checked", true);
}
}
} else {
var divClass = $(this).parent('div').parent('div').attr('class');
if (divClass == 'treeDivStyle treeOneStyle') {
$(this).parent('div').parent('div').parent('div').find('input').prop("checked", false);
var display = $(this).parent('div').parent('div').parent('div').children("div[class='treeChildrenModel']").first().children('div').css('display');
if (display == "none") {
$(this).parent().parent().parent().children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeTwoStyle']").css('display', '');
$(this).parent().parent().parent().children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeThreeStyle']").css('display', '');
} else {
$(this).parent().parent().parent().children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeTwoStyle']").css('display', 'none');
$(this).parent().parent().parent().children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeThreeStyle']").css('display', 'none');
}
}
if (divClass == 'treeDivStyle treeTwoStyle') {
$(this).parent('div').parent('div').parent('div').find('input').prop("checked", false);
var display = $(this).parent('div').parent('div').parent('div').children("div[class='treeDivStyle treeThreeStyle']").first().css('display');
if (display == 'none') {
$(this).parent('div').parent('div').parent('div').children("div[class='treeDivStyle treeThreeStyle']").css('display', '');
} else {
$(this).parent('div').parent('div').parent('div').children("div[class='treeDivStyle treeThreeStyle']").css('display', 'none');
}
$(this).parent().parent().parent().parent().children("div[class='treeDivStyle treeOneStyle']").find('input').prop("checked", false);
}
if (divClass == 'treeDivStyle treeThreeStyle') {
$(this).parent().parent().parent().children("div[class='treeDivStyle treeTwoStyle']").find('input').prop("checked", false);
}
}
})
// 一级
$('.treeOneStyle').click(function () {
var display = $(this).parent("div[class='treeModel']").children("div[class='treeChildrenModel']").first().children("div[class='treeDivStyle treeTwoStyle']").css('display');
if (display == 'none') {
$(this).parent("div[class='treeModel']").children("div[class='treeDivStyle treeTwoStyle']").css('display', '');
$(this).parent("div[class='treeModel']").children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeTwoStyle']").css('display', '');
} else {
$(this).parent("div[class='treeModel']").children("div[class='treeDivStyle treeTwoStyle']").css('display', 'none');
$(this).parent("div[class='treeModel']").children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeTwoStyle']").css('display', 'none');
$(this).parent("div[class='treeModel']").children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeThreeStyle']").css('display', 'none');
}
})
// 二级
$('.treeTwoStyle').click(function () {
var display = $(this).parent("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeThreeStyle']").first().css('display');
if (display == 'none') {
$(this).parent("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeThreeStyle']").css('display', '');
} else {
$(this).parent("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeThreeStyle']").css('display', 'none');
}
})
// 隐藏
$('.treeSelect').css('display', 'none');
$('#sampBizModeId').click(function () {
$('.treeSelect').css('display', '');
$('.treeSelect').focus();
})
// 关闭
$('.closelTree').click(function () {
$('.treeSelect').css('display', 'none');
})
// 确认
var checkedIds = '';
var checkedNames = '';
$('.confirmTree').click(function () {
$('.treeSelect').css('display', 'none');
$('.treeSelect').find(':checkbox').each(function () {
if ($(this).is(":checked")) {
var className = $(this).parent().parent().attr('class');
if (className == 'treeDivStyle treeThreeStyle') {
if (checkedIds == '') {
checkedIds = $(this).parent().find('a').val();
} else {
checkedIds = checkedIds + '，' + $(this).parent().find('a').val();
}
if (checkedNames == '') {
checkedNames = $(this).parent().find('a').text();
} else {
checkedNames = checkedNames + '，' + $(this).parent().find('a').text();
}
}
}
});
// 赋值
$('#sampBizModelName').val(checkedIds);
$('#sampBizModeId').val(checkedNames);
})
}
// 带查询，单选Tree
function autoInitTree() {
// 获取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'><i class='icon-caret-right'></i><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'><i class='icon-caret-right'></i><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'><i class='icon-hand-right'></i><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 closelTree'>确认</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', '');
$(this).parent().parent().parent().children("div[class='treeDivStyle treeTwoStyle']").children('div').find('i').attr('class', 'icon-caret-down');
}
}
})
}
});
}
// 带查询，单选Tree
function autoInitControlTree() {
// 隐藏二级
$('.treeTwoStyle').css('display', 'none');
// 隐藏三级
$('.treeThreeStyle').css('display', 'none');
// 一级
$('.treeOneStyle').click(function () {
// icon
var iconClass = $(this).find('i').attr('class');
if (iconClass == 'icon-caret-right') {
$(this).find('i').attr('class', 'icon-caret-down');
$(this).parent("div[class='treeModel']").children("div[class='treeDivStyle treeTwoStyle']").css('display', '');
$(this).parent("div[class='treeModel']").children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeTwoStyle']").css('display', '');
} else {
$(this).find('i').attr('class', 'icon-caret-right');
$(this).parent("div[class='treeModel']").children("div[class='treeDivStyle treeTwoStyle']").find('div').find('i').attr('class', 'icon-caret-right');
$(this).parent("div[class='treeModel']").children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeTwoStyle']").find('div').find('i').attr('class', 'icon-caret-right');
$(this).parent("div[class='treeModel']").children("div[class='treeDivStyle treeTwoStyle']").css('display', 'none');
$(this).parent("div[class='treeModel']").children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeTwoStyle']").css('display', 'none');
$(this).parent("div[class='treeModel']").children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeThreeStyle']").css('display', 'none');
}
})
// 二级
$('.treeTwoStyle').click(function () {
// icon
var iconClass = $(this).find('i').attr('class');
if (iconClass == 'icon-caret-right') {
$(this).find('i').attr('class', 'icon-caret-down');
$(this).parent("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeThreeStyle']").css('display', '');
} else {
$(this).find('i').attr('class', 'icon-caret-right');
$(this).parent("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeThreeStyle']").css('display', 'none');
}
})
// 隐藏
$('.treeSelect').css('display', 'none');
$('#sampBizModeId').click(function () {
$('.treeSelect').css('display', '');
$('.treeSelect').focus();
})
$('.treeThreeStyle').click(function () {
var text = $(this).find('div').find('a').text();
var id = $(this).find('div').find('a').val();
$('#sampBizModelName').val(id);
$('#sampBizModeId').val(text);
$('.treeSelect').css('display', 'none');
})
// 关闭
$('.closelTree').click(function () {
$('.treeSelect').css('display', 'none');
})
}
// 多选Tree
function checkboxTree() {
// 获取JSON
var jsonString = '${assayItemClassExtList}';
var jsonObject = $.parseJSON(jsonString);
// 解析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);
}
}
var controlTree = "<div class='treeControlStyle'><div class='childrenOneDivStyle'>" +
"<button class='buttonTreeStyle confirmTree'>确认</button>" +
"<button class='buttonTreeStyle closelTree'>关闭</button></div></div>";
$('.treeSelect').html(tree).append(controlTree);
}
// 多选Tree
function checkboxTreeControl() {
// 隐藏二级
$('.treeTwoStyle').css('display', 'none');
// 隐藏三级
$('.treeThreeStyle').css('display', 'none');
// checkbox
$('.checkboxTreeStyle').click(function () {
var checkbox = $(this).is(":checked");
if (checkbox == true) {
var divClass = $(this).parent('div').parent('div').attr('class');
if (divClass == 'treeDivStyle treeOneStyle') {
$(this).parent('div').parent('div').parent('div').find('input').prop("checked", true);
var display = $(this).parent('div').parent('div').parent('div').children("div[class='treeChildrenModel']").first().children('div').css('display');
if (display == "none") {
$(this).parent().parent().parent().children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeTwoStyle']").css('display', '');
$(this).parent().parent().parent().children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeThreeStyle']").css('display', '');
} else {
$(this).parent().parent().parent().children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeTwoStyle']").css('display', 'none');
$(this).parent().parent().parent().children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeThreeStyle']").css('display', 'none');
}
}
if (divClass == 'treeDivStyle treeTwoStyle') {
$(this).parent('div').parent('div').parent('div').find('input').prop("checked", true);
var display = $(this).parent('div').parent('div').parent('div').children("div[class='treeDivStyle treeThreeStyle']").first().css('display');
if (display == 'none') {
$(this).parent('div').parent('div').parent('div').children("div[class='treeDivStyle treeThreeStyle']").css('display', '');
} else {
$(this).parent('div').parent('div').parent('div').children("div[class='treeDivStyle treeThreeStyle']").css('display', 'none');
}
var number = 0;
var checkedNumber = 0;
$(this).parent().parent().parent().parent().find("div[class='treeDivStyle treeTwoStyle']").each(function () {
number++;
})
$(this).parent().parent().parent().parent().find("div[class='treeDivStyle treeTwoStyle']").find(':checkbox').each(function () {
if ($(this).is(":checked")) {
checkedNumber++;
}
})
if (number == checkedNumber) {
$(this).parent().parent().parent().parent().children("div[class='treeDivStyle treeOneStyle']").find('input').prop("checked", true);
}
}
if (divClass == 'treeDivStyle treeThreeStyle') {
var number = 0;
var checkedNumber = 0;
$(this).parent().parent().parent().find("div[class='treeDivStyle treeThreeStyle']").each(function () {
number++;
})
$(this).parent().parent().parent().find("div[class='treeDivStyle treeThreeStyle']").find(':checkbox').each(function () {
if ($(this).is(":checked")) {
checkedNumber++;
}
})
if (number == checkedNumber) {
$(this).parent().parent().parent().children("div[class='treeDivStyle treeTwoStyle']").find('input').prop("checked", true);
}
}
} else {
var divClass = $(this).parent('div').parent('div').attr('class');
if (divClass == 'treeDivStyle treeOneStyle') {
$(this).parent('div').parent('div').parent('div').find('input').prop("checked", false);
var display = $(this).parent('div').parent('div').parent('div').children("div[class='treeChildrenModel']").first().children('div').css('display');
if (display == "none") {
$(this).parent().parent().parent().children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeTwoStyle']").css('display', '');
$(this).parent().parent().parent().children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeThreeStyle']").css('display', '');
} else {
$(this).parent().parent().parent().children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeTwoStyle']").css('display', 'none');
$(this).parent().parent().parent().children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeThreeStyle']").css('display', 'none');
}
}
if (divClass == 'treeDivStyle treeTwoStyle') {
$(this).parent('div').parent('div').parent('div').find('input').prop("checked", false);
var display = $(this).parent('div').parent('div').parent('div').children("div[class='treeDivStyle treeThreeStyle']").first().css('display');
if (display == 'none') {
$(this).parent('div').parent('div').parent('div').children("div[class='treeDivStyle treeThreeStyle']").css('display', '');
} else {
$(this).parent('div').parent('div').parent('div').children("div[class='treeDivStyle treeThreeStyle']").css('display', 'none');
}
$(this).parent().parent().parent().parent().children("div[class='treeDivStyle treeOneStyle']").find('input').prop("checked", false);
}
if (divClass == 'treeDivStyle treeThreeStyle') {
$(this).parent().parent().parent().children("div[class='treeDivStyle treeTwoStyle']").find('input').prop("checked", false);
}
}
})
// 一级
$('.treeOneStyle').click(function () {
var display = $(this).parent("div[class='treeModel']").children("div[class='treeChildrenModel']").first().children("div[class='treeDivStyle treeTwoStyle']").css('display');
if (display == 'none') {
$(this).parent("div[class='treeModel']").children("div[class='treeDivStyle treeTwoStyle']").css('display', '');
$(this).parent("div[class='treeModel']").children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeTwoStyle']").css('display', '');
} else {
$(this).parent("div[class='treeModel']").children("div[class='treeDivStyle treeTwoStyle']").css('display', 'none');
$(this).parent("div[class='treeModel']").children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeTwoStyle']").css('display', 'none');
$(this).parent("div[class='treeModel']").children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeThreeStyle']").css('display', 'none');
}
})
// 二级
$('.treeTwoStyle').click(function () {
var display = $(this).parent("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeThreeStyle']").first().css('display');
if (display == 'none') {
$(this).parent("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeThreeStyle']").css('display', '');
} else {
$(this).parent("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeThreeStyle']").css('display', 'none');
}
})
// 隐藏
$('.treeSelect').css('display', 'none');
$('#sampBizModeId').click(function () {
$('.treeSelect').css('display', '');
$('.treeSelect').focus();
})
// 关闭
$('.closelTree').click(function () {
$('.treeSelect').css('display', 'none');
})
// 确认
var checkedIds = '';
var checkedNames = '';
$('.confirmTree').click(function () {
$('.treeSelect').css('display', 'none');
$('.treeSelect').find(':checkbox').each(function () {
if ($(this).is(":checked")) {
var className = $(this).parent().parent().attr('class');
if (className == 'treeDivStyle treeThreeStyle') {
if (checkedIds == '') {
checkedIds = $(this).parent().find('a').val();
} else {
checkedIds = checkedIds + '，' + $(this).parent().find('a').val();
}
if (checkedNames == '') {
checkedNames = $(this).parent().find('a').text();
} else {
checkedNames = checkedNames + '，' + $(this).parent().find('a').text();
}
}
}
});
// 赋值
$('#sampBizModelName').val(checkedIds);
$('#sampBizModeId').val(checkedNames);
})
}
// 单选Tree
function initTree() {
// 获取JSON
var jsonString = '${assayItemClassExtList}';
var jsonObject = $.parseJSON(jsonString);
// 解析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'><i class='icon-caret-right'></i><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'><i class='icon-caret-right'></i><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'><i class='icon-hand-right'></i><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);
}
}
var controlTree = "<div class='treeControlStyle'><div class='childrenOneDivStyle'>" +
"<button class='buttonTreeStyle closelTree'>确认</button>" +
"<button class='buttonTreeStyle closelTree'>关闭</button></div></div>";
$('.treeSelect').html(tree).append(controlTree);
}
// 单选Tree
function initTreeControl() {
// 隐藏二级
$('.treeTwoStyle').css('display', 'none');
// 隐藏三级
$('.treeThreeStyle').css('display', 'none');
// 一级
$('.treeOneStyle').click(function () {
// icon
var iconClass = $(this).find('i').attr('class');
if (iconClass == 'icon-caret-right') {
$(this).find('i').attr('class', 'icon-caret-down');
$(this).parent("div[class='treeModel']").children("div[class='treeDivStyle treeTwoStyle']").css('display', '');
$(this).parent("div[class='treeModel']").children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeTwoStyle']").css('display', '');
} else {
$(this).find('i').attr('class', 'icon-caret-right');
$(this).parent("div[class='treeModel']").children("div[class='treeDivStyle treeTwoStyle']").find('div').find('i').attr('class', 'icon-caret-right');
$(this).parent("div[class='treeModel']").children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeTwoStyle']").find('div').find('i').attr('class', 'icon-caret-right');
$(this).parent("div[class='treeModel']").children("div[class='treeDivStyle treeTwoStyle']").css('display', 'none');
$(this).parent("div[class='treeModel']").children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeTwoStyle']").css('display', 'none');
$(this).parent("div[class='treeModel']").children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeThreeStyle']").css('display', 'none');
}
})
// 二级
$('.treeTwoStyle').click(function () {
// icon
var iconClass = $(this).find('i').attr('class');
if (iconClass == 'icon-caret-right') {
$(this).find('i').attr('class', 'icon-caret-down');
$(this).parent("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeThreeStyle']").css('display', '');
} else {
$(this).find('i').attr('class', 'icon-caret-right');
$(this).parent("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeThreeStyle']").css('display', 'none');
}
})
// 隐藏
$('.treeSelect').css('display', 'none');
$('#sampBizModeId').click(function () {
$('.treeSelect').css('display', '');
$('.treeSelect').focus();
})
$('.treeThreeStyle').click(function () {
var text = $(this).find('div').find('a').text();
var id = $(this).find('div').find('a').val();
var testObjectId=$(this).parent().find('div').eq(0).find('div').find('a').val();
$('#sampBizModelName').val(id);
$('#sampBizModeId').val(text);
$('#testObjectId').val(testObjectId);
$('.treeSelect').css('display', 'none');
// 触发事件
$('#sampBizModeId').trigger('change');
})
// 关闭
$('.closelTree').click(function () {
$('.treeSelect').css('display', 'none');
})
}
// ajax
$.ajaxJson = {
// 单选Tree
reloadInitTree: function (json) {
// 获取JSON
var jsonObject = json;
// 解析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'><i class='icon-caret-right'></i><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'><i class='icon-caret-right'></i><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'><i class='icon-hand-right'></i><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);
}
}
var controlTree = "<div class='treeControlStyle'><div class='childrenOneDivStyle'>" +
"<button class='buttonTreeStyle closelTree'>确认</button>" +
"<button class='buttonTreeStyle closelTree'>关闭</button></div></div>";
$('.treeSelect').html(tree).append(controlTree);
// 重新渲染
$('.treeTwoStyle').css('display', 'none');
$('.treeThreeStyle').css('display', 'none');
// 一级
$('.treeOneStyle').click(function () {
// icon
var iconClass = $(this).find('i').attr('class');
if (iconClass == 'icon-caret-right') {
$(this).find('i').attr('class', 'icon-caret-down');
$(this).parent("div[class='treeModel']").children("div[class='treeDivStyle treeTwoStyle']").css('display', '');
$(this).parent("div[class='treeModel']").children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeTwoStyle']").css('display', '');
} else {
$(this).find('i').attr('class', 'icon-caret-right');
$(this).parent("div[class='treeModel']").children("div[class='treeDivStyle treeTwoStyle']").find('div').find('i').attr('class', 'icon-caret-right');
$(this).parent("div[class='treeModel']").children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeTwoStyle']").find('div').find('i').attr('class', 'icon-caret-right');
$(this).parent("div[class='treeModel']").children("div[class='treeDivStyle treeTwoStyle']").css('display', 'none');
$(this).parent("div[class='treeModel']").children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeTwoStyle']").css('display', 'none');
$(this).parent("div[class='treeModel']").children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeThreeStyle']").css('display', 'none');
}
})
// 二级
$('.treeTwoStyle').click(function () {
// icon
var iconClass = $(this).find('i').attr('class');
if (iconClass == 'icon-caret-right') {
$(this).find('i').attr('class', 'icon-caret-down');
$(this).parent("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeThreeStyle']").css('display', '');
} else {
$(this).find('i').attr('class', 'icon-caret-right');
$(this).parent("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeThreeStyle']").css('display', 'none');
}
})
// 隐藏
$('.treeSelect').css('display', 'none');
$('#sampBizModeId').click(function () {
$('.treeSelect').css('display', '');
$('.treeSelect').focus();
})
$('.treeThreeStyle').click(function () {
var text = $(this).find('div').find('a').text();
var id = $(this).find('div').find('a').val();
var testObjectId=$(this).parent().find('div').eq(0).find('div').find('a').val();
$('#sampBizModelName').val(id);
$('#sampBizModeId').val(text);
$('#testObjectId').val(testObjectId);
$('.treeSelect').css('display', 'none');
// 触发事件
$('#sampBizModeId').trigger('change');
})
// 关闭
$('.closelTree').click(function () {
$('.treeSelect').css('display', 'none');
})
},
// 多选Tree
reloadCheckboxTree: function (json) {
// 获取JSON
var jsonObject = json;
// 解析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);
}
}
var controlTree = "<div class='treeControlStyle'><div class='childrenOneDivStyle'>" +
"<button class='buttonTreeStyle confirmTree'>确认</button>" +
"<button class='buttonTreeStyle closelTree'>关闭</button></div></div>";
$('.treeSelect').html(tree).append(controlTree);
// 重新渲染
// 隐藏
$('.treeTwoStyle').css('display', 'none');
$('.treeThreeStyle').css('display', 'none');
// checkbox
$('.checkboxTreeStyle').click(function () {
var checkbox = $(this).is(":checked");
if (checkbox == true) {
var divClass = $(this).parent('div').parent('div').attr('class');
if (divClass == 'treeDivStyle treeOneStyle') {
$(this).parent('div').parent('div').parent('div').find('input').prop("checked", true);
var display = $(this).parent('div').parent('div').parent('div').children("div[class='treeChildrenModel']").first().children('div').css('display');
if (display == "none") {
$(this).parent().parent().parent().children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeTwoStyle']").css('display', '');
$(this).parent().parent().parent().children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeThreeStyle']").css('display', '');
} else {
$(this).parent().parent().parent().children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeTwoStyle']").css('display', 'none');
$(this).parent().parent().parent().children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeThreeStyle']").css('display', 'none');
}
}
if (divClass == 'treeDivStyle treeTwoStyle') {
$(this).parent('div').parent('div').parent('div').find('input').prop("checked", true);
var display = $(this).parent('div').parent('div').parent('div').children("div[class='treeDivStyle treeThreeStyle']").first().css('display');
if (display == 'none') {
$(this).parent('div').parent('div').parent('div').children("div[class='treeDivStyle treeThreeStyle']").css('display', '');
} else {
$(this).parent('div').parent('div').parent('div').children("div[class='treeDivStyle treeThreeStyle']").css('display', 'none');
}
var number = 0;
var checkedNumber = 0;
$(this).parent().parent().parent().parent().find("div[class='treeDivStyle treeTwoStyle']").each(function () {
number++;
})
$(this).parent().parent().parent().parent().find("div[class='treeDivStyle treeTwoStyle']").find(':checkbox').each(function () {
if ($(this).is(":checked")) {
checkedNumber++;
}
})
if (number == checkedNumber) {
$(this).parent().parent().parent().parent().children("div[class='treeDivStyle treeOneStyle']").find('input').prop("checked", true);
}
}
if (divClass == 'treeDivStyle treeThreeStyle') {
var number = 0;
var checkedNumber = 0;
$(this).parent().parent().parent().find("div[class='treeDivStyle treeThreeStyle']").each(function () {
number++;
})
$(this).parent().parent().parent().find("div[class='treeDivStyle treeThreeStyle']").find(':checkbox').each(function () {
if ($(this).is(":checked")) {
checkedNumber++;
}
})
if (number == checkedNumber) {
$(this).parent().parent().parent().children("div[class='treeDivStyle treeTwoStyle']").find('input').prop("checked", true);
}
}
} else {
var divClass = $(this).parent('div').parent('div').attr('class');
if (divClass == 'treeDivStyle treeOneStyle') {
$(this).parent('div').parent('div').parent('div').find('input').prop("checked", false);
var display = $(this).parent('div').parent('div').parent('div').children("div[class='treeChildrenModel']").first().children('div').css('display');
if (display == "none") {
$(this).parent().parent().parent().children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeTwoStyle']").css('display', '');
$(this).parent().parent().parent().children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeThreeStyle']").css('display', '');
} else {
$(this).parent().parent().parent().children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeTwoStyle']").css('display', 'none');
$(this).parent().parent().parent().children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeThreeStyle']").css('display', 'none');
}
}
if (divClass == 'treeDivStyle treeTwoStyle') {
$(this).parent('div').parent('div').parent('div').find('input').prop("checked", false);
var display = $(this).parent('div').parent('div').parent('div').children("div[class='treeDivStyle treeThreeStyle']").first().css('display');
if (display == 'none') {
$(this).parent('div').parent('div').parent('div').children("div[class='treeDivStyle treeThreeStyle']").css('display', '');
} else {
$(this).parent('div').parent('div').parent('div').children("div[class='treeDivStyle treeThreeStyle']").css('display', 'none');
}
$(this).parent().parent().parent().parent().children("div[class='treeDivStyle treeOneStyle']").find('input').prop("checked", false);
}
if (divClass == 'treeDivStyle treeThreeStyle') {
$(this).parent().parent().parent().children("div[class='treeDivStyle treeTwoStyle']").find('input').prop("checked", false);
}
}
})
// 一级
$('.treeOneStyle').click(function () {
var display = $(this).parent("div[class='treeModel']").children("div[class='treeChildrenModel']").first().children("div[class='treeDivStyle treeTwoStyle']").css('display');
if (display == 'none') {
$(this).parent("div[class='treeModel']").children("div[class='treeDivStyle treeTwoStyle']").css('display', '');
$(this).parent("div[class='treeModel']").children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeTwoStyle']").css('display', '');
} else {
$(this).parent("div[class='treeModel']").children("div[class='treeDivStyle treeTwoStyle']").css('display', 'none');
$(this).parent("div[class='treeModel']").children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeTwoStyle']").css('display', 'none');
$(this).parent("div[class='treeModel']").children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeThreeStyle']").css('display', 'none');
}
})
// 二级
$('.treeTwoStyle').click(function () {
var display = $(this).parent("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeThreeStyle']").first().css('display');
if (display == 'none') {
$(this).parent("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeThreeStyle']").css('display', '');
} else {
$(this).parent("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeThreeStyle']").css('display', 'none');
}
})
// 隐藏
$('.treeSelect').css('display', 'none');
$('#sampBizModeId').click(function () {
$('.treeSelect').css('display', '');
$('.treeSelect').focus();
})
// 关闭
$('.closelTree').click(function () {
$('.treeSelect').css('display', 'none');
})
// 确认
var checkedIds = '';
var checkedNames = '';
$('.confirmTree').click(function () {
$('.treeSelect').css('display', 'none');
$('.treeSelect').find(':checkbox').each(function () {
if ($(this).is(":checked")) {
var className = $(this).parent().parent().attr('class');
if (className == 'treeDivStyle treeThreeStyle') {
if (checkedIds == '') {
checkedIds = $(this).parent().find('a').val();
} else {
checkedIds = checkedIds + '，' + $(this).parent().find('a').val();
}
if (checkedNames == '') {
checkedNames = $(this).parent().find('a').text();
} else {
checkedNames = checkedNames + '，' + $(this).parent().find('a').text();
}
}
}
});
// 赋值
$('#sampBizModelName').val(checkedIds);
$('#sampBizModeId').val(checkedNames);
})
},
// 单选Tree，带查询
reloadAutoInitTree: function (json) {
// 获取JSON
var jsonObject = json;
// 数据源
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'><i class='icon-caret-right'></i><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'><i class='icon-caret-right'></i><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'><i class='icon-hand-right'></i><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 closelTree'>确认</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', '');
$(this).parent().parent().parent().children("div[class='treeDivStyle treeTwoStyle']").children('div').find('i').attr('class', 'icon-caret-down');
}
}
})
}
});
// 重新渲染
$('.treeTwoStyle').css('display', 'none');
$('.treeThreeStyle').css('display', 'none');
// 一级
$('.treeOneStyle').click(function () {
// icon
var iconClass = $(this).find('i').attr('class');
if (iconClass == 'icon-caret-right') {
$(this).find('i').attr('class', 'icon-caret-down');
$(this).parent("div[class='treeModel']").children("div[class='treeDivStyle treeTwoStyle']").css('display', '');
$(this).parent("div[class='treeModel']").children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeTwoStyle']").css('display', '');
} else {
$(this).find('i').attr('class', 'icon-caret-right');
$(this).parent("div[class='treeModel']").children("div[class='treeDivStyle treeTwoStyle']").find('div').find('i').attr('class', 'icon-caret-right');
$(this).parent("div[class='treeModel']").children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeTwoStyle']").find('div').find('i').attr('class', 'icon-caret-right');
$(this).parent("div[class='treeModel']").children("div[class='treeDivStyle treeTwoStyle']").css('display', 'none');
$(this).parent("div[class='treeModel']").children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeTwoStyle']").css('display', 'none');
$(this).parent("div[class='treeModel']").children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeThreeStyle']").css('display', 'none');
}
})
// 二级
$('.treeTwoStyle').click(function () {
// icon
var iconClass = $(this).find('i').attr('class');
if (iconClass == 'icon-caret-right') {
$(this).find('i').attr('class', 'icon-caret-down');
$(this).parent("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeThreeStyle']").css('display', '');
} else {
$(this).find('i').attr('class', 'icon-caret-right');
$(this).parent("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeThreeStyle']").css('display', 'none');
}
})
// 隐藏
$('.treeSelect').css('display', 'none');
$('#sampBizModeId').click(function () {
$('.treeSelect').css('display', '');
$('.treeSelect').focus();
})
$('.treeThreeStyle').click(function () {
var text = $(this).find('div').find('a').text();
var id = $(this).find('div').find('a').val();
$('#sampBizModelName').val(id);
$('#sampBizModeId').val(text);
$('.treeSelect').css('display', 'none');
})
$('.treeSelect').blur(function () {
$('.treeSelect').css('display', 'none');
})
},
// 多选Tree，带查询
reloadAutoCheckboxTree:function (json) {
// 获取JSON
var jsonObject = json;
// 数据源
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', '');
}
}
})
}
});
// 重新渲染
$('.treeTwoStyle').css('display', 'none');
$('.treeThreeStyle').css('display', 'none');
// checkbox
$('.checkboxTreeStyle').click(function () {
var checkbox = $(this).is(":checked");
if (checkbox == true) {
var divClass = $(this).parent('div').parent('div').attr('class');
if (divClass == 'treeDivStyle treeOneStyle') {
$(this).parent('div').parent('div').parent('div').find('input').prop("checked", true);
var display = $(this).parent('div').parent('div').parent('div').children("div[class='treeChildrenModel']").first().children('div').css('display');
if (display == "none") {
$(this).parent().parent().parent().children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeTwoStyle']").css('display', '');
$(this).parent().parent().parent().children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeThreeStyle']").css('display', '');
} else {
$(this).parent().parent().parent().children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeTwoStyle']").css('display', 'none');
$(this).parent().parent().parent().children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeThreeStyle']").css('display', 'none');
}
}
if (divClass == 'treeDivStyle treeTwoStyle') {
$(this).parent('div').parent('div').parent('div').find('input').prop("checked", true);
var display = $(this).parent('div').parent('div').parent('div').children("div[class='treeDivStyle treeThreeStyle']").first().css('display');
if (display == 'none') {
$(this).parent('div').parent('div').parent('div').children("div[class='treeDivStyle treeThreeStyle']").css('display', '');
} else {
$(this).parent('div').parent('div').parent('div').children("div[class='treeDivStyle treeThreeStyle']").css('display', 'none');
}
var number = 0;
var checkedNumber = 0;
$(this).parent().parent().parent().parent().find("div[class='treeDivStyle treeTwoStyle']").each(function () {
number++;
})
$(this).parent().parent().parent().parent().find("div[class='treeDivStyle treeTwoStyle']").find(':checkbox').each(function () {
if ($(this).is(":checked")) {
checkedNumber++;
}
})
if (number == checkedNumber) {
$(this).parent().parent().parent().parent().children("div[class='treeDivStyle treeOneStyle']").find('input').prop("checked", true);
}
}
if (divClass == 'treeDivStyle treeThreeStyle') {
var number = 0;
var checkedNumber = 0;
$(this).parent().parent().parent().find("div[class='treeDivStyle treeThreeStyle']").each(function () {
number++;
})
$(this).parent().parent().parent().find("div[class='treeDivStyle treeThreeStyle']").find(':checkbox').each(function () {
if ($(this).is(":checked")) {
checkedNumber++;
}
})
if (number == checkedNumber) {
$(this).parent().parent().parent().children("div[class='treeDivStyle treeTwoStyle']").find('input').prop("checked", true);
}
}
} else {
var divClass = $(this).parent('div').parent('div').attr('class');
if (divClass == 'treeDivStyle treeOneStyle') {
$(this).parent('div').parent('div').parent('div').find('input').prop("checked", false);
var display = $(this).parent('div').parent('div').parent('div').children("div[class='treeChildrenModel']").first().children('div').css('display');
if (display == "none") {
$(this).parent().parent().parent().children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeTwoStyle']").css('display', '');
$(this).parent().parent().parent().children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeThreeStyle']").css('display', '');
} else {
$(this).parent().parent().parent().children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeTwoStyle']").css('display', 'none');
$(this).parent().parent().parent().children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeThreeStyle']").css('display', 'none');
}
}
if (divClass == 'treeDivStyle treeTwoStyle') {
$(this).parent('div').parent('div').parent('div').find('input').prop("checked", false);
var display = $(this).parent('div').parent('div').parent('div').children("div[class='treeDivStyle treeThreeStyle']").first().css('display');
if (display == 'none') {
$(this).parent('div').parent('div').parent('div').children("div[class='treeDivStyle treeThreeStyle']").css('display', '');
} else {
$(this).parent('div').parent('div').parent('div').children("div[class='treeDivStyle treeThreeStyle']").css('display', 'none');
}
$(this).parent().parent().parent().parent().children("div[class='treeDivStyle treeOneStyle']").find('input').prop("checked", false);
}
if (divClass == 'treeDivStyle treeThreeStyle') {
$(this).parent().parent().parent().children("div[class='treeDivStyle treeTwoStyle']").find('input').prop("checked", false);
}
}
})
// 一级
$('.treeOneStyle').click(function () {
var display = $(this).parent("div[class='treeModel']").children("div[class='treeChildrenModel']").first().children("div[class='treeDivStyle treeTwoStyle']").css('display');
if (display == 'none') {
$(this).parent("div[class='treeModel']").children("div[class='treeDivStyle treeTwoStyle']").css('display', '');
$(this).parent("div[class='treeModel']").children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeTwoStyle']").css('display', '');
} else {
$(this).parent("div[class='treeModel']").children("div[class='treeDivStyle treeTwoStyle']").css('display', 'none');
$(this).parent("div[class='treeModel']").children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeTwoStyle']").css('display', 'none');
$(this).parent("div[class='treeModel']").children("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeThreeStyle']").css('display', 'none');
}
})
// 二级
$('.treeTwoStyle').click(function () {
var display = $(this).parent("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeThreeStyle']").first().css('display');
if (display == 'none') {
$(this).parent("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeThreeStyle']").css('display', '');
} else {
$(this).parent("div[class='treeChildrenModel']").children("div[class='treeDivStyle treeThreeStyle']").css('display', 'none');
}
})
// 隐藏
$('.treeSelect').css('display', 'none');
$('#sampBizModeId').click(function () {
$('.treeSelect').css('display', '');
$('.treeSelect').focus();
})
// 关闭
$('.closelTree').click(function () {
$('.treeSelect').css('display', 'none');
})
// 确认
var checkedIds = '';
var checkedNames = '';
$('.confirmTree').click(function () {
$('.treeSelect').css('display', 'none');
$('.treeSelect').find(':checkbox').each(function () {
if ($(this).is(":checked")) {
var className = $(this).parent().parent().attr('class');
if (className == 'treeDivStyle treeThreeStyle') {
if (checkedIds == '') {
checkedIds = $(this).parent().find('a').val();
} else {
checkedIds = checkedIds + '，' + $(this).parent().find('a').val();
}
if (checkedNames == '') {
checkedNames = $(this).parent().find('a').text();
} else {
checkedNames = checkedNames + '，' + $(this).parent().find('a').text();
}
}
}
});
// 赋值
$('#sampBizModelName').val(checkedIds);
$('#sampBizModeId').val(checkedNames);
})
}
}
</script>二级联动
当第二个控件为Tree的时候
使用ajax请求后台数据，重新组织Tree的数据
$('#laboratorySelect').change(function (e) {
getMonthlyPlanNo($(this).val());
var labId = $("#laboratorySelect option:selected").val();
$.ajax({
type: "get",
url: ctx + "/biz/plan/monthly-plan/getSampBizModeIdByLaboratoryId?labId=" + labId,
data: "",
dataType: "json",
async: false,
success: function (jsonData) {
// 解析JSON
$.ajaxJson.reloadInitTree(jsonData);
// 清空检测对象
$('#sampBizModeId').val('');
}
})
});
扫一扫
461
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
