利用combobox聯動本地JSON資料
阿新 • • 發佈：2019-01-04
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="PrisonPM.MM.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="../Scripts/EasyUI/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="../Scripts/EasyUI/themes/icon.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/EasyUI/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="../Scripts/EasyUI/jquery.easyui.min.js" type="text/javascript"></script>
<script src="../Scripts/json.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
var MAS_PART_CLASS_ALL;//全域性資料變數
$(function () {
//MAS_PART_CLASS_ALL的Json資料格式
//var MAS_PART_CLASS_ALL = '["PARTCLASSKEY":1,"PARTCLASSCNNAME":"ss","children":[{"PARTCLASSKEY":10,"PARTCLASSCNNAME":"sss222","children":[{"PARTCLASSKEY":666,"PARTCLASSCNNAME":"67676"}]}]]';
$.ajax({
url: '../PublicData/MAS_PART_CLASS_ALL.aspx',//載入本地的JSON資料
type: "get",
dataType: "json",
success: function (data) {
MAS_PART_CLASS_ALL = data;//取出資料放入全域性資料變數中
$('#one').combobox({ data: data });//載入第一級別類
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
return;
}
});
//第一級別類載入、並設定第二級別聯動資料
$('#one').combobox({
//url: '../PublicData/MAS_PART_CLASS_ALL.aspx',
valueField: 'PARTCLASSKEY',
textField: 'PARTCLASSCNNAME',
onChange: function (newValue, oldValue) {
var MAS_PART_CLASS_TWO = [];
for (var e in MAS_PART_CLASS_ALL) {//迴圈第一級別資料
if (MAS_PART_CLASS_ALL[e].PARTCLASSKEY == newValue) {
for (var p in MAS_PART_CLASS_ALL[e].children) {//迴圈取出第二級別資料
MAS_PART_CLASS_TWO.push({ "PARTCLASSKEY": MAS_PART_CLASS_ALL[e].children[p].PARTCLASSKEY, "PARTCLASSCNNAME": MAS_PART_CLASS_ALL[e].children[p].PARTCLASSCNNAME });
}
break;
}
}
$('#two').combobox("clear").combobox({ data: MAS_PART_CLASS_TWO });
$('#three').combobox("clear");
}
});
//第二級別類載入、並設定第三級別聯動資料
$('#two').combobox({
valueField: 'PARTCLASSKEY',
textField: 'PARTCLASSCNNAME',
onChange: function (newValue, oldValue) {
var MAS_PART_CLASS_THREE = [];
for (var e in MAS_PART_CLASS_ALL) {//迴圈第一級別資料
if (MAS_PART_CLASS_ALL[e].PARTCLASSKEY == $('#one').combobox("getValue")) {
for (var p in MAS_PART_CLASS_ALL[e].children) {//迴圈第二級別資料
if (MAS_PART_CLASS_ALL[e].children[p].PARTCLASSKEY == newValue) {
for (var cc in MAS_PART_CLASS_ALL[e].children[p].children) {//迴圈取出第三級別資料
MAS_PART_CLASS_THREE.push({ "PARTCLASSKEY": MAS_PART_CLASS_ALL[e].children[p].children[cc].PARTCLASSKEY, "PARTCLASSCNNAME": MAS_PART_CLASS_ALL[e].children[p].children[cc].PARTCLASSCNNAME });
}
}
}
}
}
$('#three').combobox("clear").combobox({ data: MAS_PART_CLASS_THREE });
}
});
//載入第三級別類
$('#three').combobox({
valueField: 'PARTCLASSKEY',
textField: 'PARTCLASSCNNAME'
});
});
</script>
</head>
<body>
<input id="one" />
<input id="two" />
<input id="three" />
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="../Scripts/EasyUI/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="../Scripts/EasyUI/themes/icon.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/EasyUI/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="../Scripts/EasyUI/jquery.easyui.min.js" type="text/javascript"></script>
<script src="../Scripts/json.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
var MAS_PART_CLASS_ALL;//全域性資料變數
$(function () {
//MAS_PART_CLASS_ALL的Json資料格式
//var MAS_PART_CLASS_ALL = '["PARTCLASSKEY":1,"PARTCLASSCNNAME":"ss","children":[{"PARTCLASSKEY":10,"PARTCLASSCNNAME":"sss222","children":[{"PARTCLASSKEY":666,"PARTCLASSCNNAME":"67676"}]}]]';
$.ajax({
url: '../PublicData/MAS_PART_CLASS_ALL.aspx',//載入本地的JSON資料
type: "get",
dataType: "json",
success: function (data) {
MAS_PART_CLASS_ALL = data;//取出資料放入全域性資料變數中
$('#one').combobox({ data: data });//載入第一級別類
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
return;
}
});
//第一級別類載入、並設定第二級別聯動資料
$('#one').combobox({
//url: '../PublicData/MAS_PART_CLASS_ALL.aspx',
valueField: 'PARTCLASSKEY',
textField: 'PARTCLASSCNNAME',
onChange: function (newValue, oldValue) {
var MAS_PART_CLASS_TWO = [];
for (var e in MAS_PART_CLASS_ALL) {//迴圈第一級別資料
if (MAS_PART_CLASS_ALL[e].PARTCLASSKEY == newValue) {
for (var p in MAS_PART_CLASS_ALL[e].children) {//迴圈取出第二級別資料
MAS_PART_CLASS_TWO.push({ "PARTCLASSKEY": MAS_PART_CLASS_ALL[e].children[p].PARTCLASSKEY, "PARTCLASSCNNAME": MAS_PART_CLASS_ALL[e].children[p].PARTCLASSCNNAME });
}
break;
}
}
$('#two').combobox("clear").combobox({ data: MAS_PART_CLASS_TWO });
$('#three').combobox("clear");
}
});
//第二級別類載入、並設定第三級別聯動資料
$('#two').combobox({
valueField: 'PARTCLASSKEY',
textField: 'PARTCLASSCNNAME',
onChange: function (newValue, oldValue) {
var MAS_PART_CLASS_THREE = [];
for (var e in MAS_PART_CLASS_ALL) {//迴圈第一級別資料
if (MAS_PART_CLASS_ALL[e].PARTCLASSKEY == $('#one').combobox("getValue")) {
for (var p in MAS_PART_CLASS_ALL[e].children) {//迴圈第二級別資料
if (MAS_PART_CLASS_ALL[e].children[p].PARTCLASSKEY == newValue) {
for (var cc in MAS_PART_CLASS_ALL[e].children[p].children) {//迴圈取出第三級別資料
MAS_PART_CLASS_THREE.push({ "PARTCLASSKEY": MAS_PART_CLASS_ALL[e].children[p].children[cc].PARTCLASSKEY, "PARTCLASSCNNAME": MAS_PART_CLASS_ALL[e].children[p].children[cc].PARTCLASSCNNAME });
}
}
}
}
}
$('#three').combobox("clear").combobox({ data: MAS_PART_CLASS_THREE });
}
});
//載入第三級別類
$('#three').combobox({
valueField: 'PARTCLASSKEY',
textField: 'PARTCLASSCNNAME'
});
});
</script>
</head>
<body>
<input id="one" />
<input id="two" />
<input id="three" />
</body>
</html>