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();})// 帶查詢，多選Treefunction autoCheckboxTree() {// 獲取JSONvar jsonString = '${assayItemClassExtList}';var jsonObject = $.parseJSON(jsonString);// 數據源var sourceList = [];// 解析JSONvar 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', '');}}})}});}// 帶查詢，多選Treefunction 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);})}// 帶查詢，單選Treefunction autoInitTree() {// 獲取JSONvar jsonString = '${assayItemClassExtList}';var jsonObject = $.parseJSON(jsonString);// 數據源var sourceList = [];// 解析JSONvar 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');}}})}});}// 帶查詢，單選Treefunction autoInitControlTree() {// 隱藏二級$('.treeTwoStyle').css('display', 'none');// 隱藏三級$('.treeThreeStyle').css('display', 'none');// 一級$('.treeOneStyle').click(function () {// iconvar 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 () {// iconvar 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');})}// 多選Treefunction checkboxTree() {// 獲取JSONvar jsonString = '${assayItemClassExtList}';var jsonObject = $.parseJSON(jsonString);// 解析JSONvar 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);}// 多選Treefunction 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);})}// 單選Treefunction initTree() {// 獲取JSONvar jsonString = '${assayItemClassExtList}';var jsonObject = $.parseJSON(jsonString);// 解析JSONvar 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);}// 單選Treefunction initTreeControl() {// 隱藏二級$('.treeTwoStyle').css('display', 'none');// 隱藏三級$('.treeThreeStyle').css('display', 'none');// 一級$('.treeOneStyle').click(function () {// iconvar 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 () {// iconvar 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 = {// 單選TreereloadInitTree: function (json) {// 獲取JSONvar jsonObject = json;// 解析JSONvar 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 () {// iconvar 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 () {// iconvar 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');})},// 多選TreereloadCheckboxTree: function (json) {// 獲取JSONvar jsonObject = json;// 解析JSONvar 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) {// 獲取JSONvar jsonObject = json;// 數據源var sourceList = [];// 解析JSONvar 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 () {// iconvar 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 () {// iconvar 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) {// 獲取JSONvar jsonObject = json;// 數據源var sourceList = [];// 解析JSONvar 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('');}}) });

總結

以上是生活随笔為你收集整理的Tree的前台解析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。