There are two comboboxes and one tree involved in the linkage:
<input id="combobox1" class="easyui-combobox" name="combobox1" style=" width:120px;" />
<input id="combobox2" class="easyui-combobox" name="combobox2" style=" width:120px;" />
<div id="tree1" class="easyui-tree"></div>
Copy the code
\
Linkage process:
Combobox1 controls combobox2 and combobox2 controls Tree1
Linkage code:
<script type="text/javascript">
// Write the subject first, then write the controller. Because the controller calls the controlled. Of course, that doesn't seem to matter
$("#combobox2").combobox({
url:"".method: "get".valueField: 'Id'.textField: 'Name'.onSelect: function (record) {// Control tree <----------------------
var url = "/api/customview/Tree? Id=" + record.Id;
$('#tree1').tree({
animate: true.checkbox: true.lines: true.url:url,
method:"get".onLoadSuccess: function (row, data) {$(this).tree("collapseAll");// All tree nodes are closed
},
toolbar: [{
text: 'Add Group'.iconCls: 'icon-folder-add'.handler: function () {
alert('Add Group'); }}}); },onLoadSuccess: function () { // After loading, select the first item
var val = $(this).combobox("getData");
for (var item in val[0]) {
if (item == "Id") {$(this).combobox("select", val[0][item]); }}}}); $("#combobox1").combobox({
url: "/api/customview/Item1".method: "get".valueField: 'Id'.textField: 'Name'.onSelect: function (record) {// control combobox2 <----------------------
var url = "/api/customview/Item2? Id=" + record.Id;
$("#combobox2").combobox('reload', url); },onLoadSuccess: function () { // After loading, select the first item
var val = $(this).combobox("getData");
for (var item in val[0]) {
if (item == "Id") {$(this).combobox("select", val[0][item]); }}}}); </script>Copy the code
\
\