关键词搜索

源码搜索 ×
×

easyUI的下拉框combobox与树tree联动

发布2015-01-15浏览10830次

详情内容

参与联动的有 2 个combobox 和 1 个tree:

  1. <input id="combobox1" class="easyui-combobox" name="combobox1" style=" width:120px;" />
  2. <input id="combobox2" class="easyui-combobox" name="combobox2" style=" width:120px;" />
  3. <div id="tree1" class="easyui-tree"></div>


联动流程:

combobox1 控制 combobox2,combobox2 控制 tree1


联动代码:

  1. <script type="text/javascript">
  2. //先写被控制者,再写控制者。因为控制者要调用被控制者。当然,这个似乎无关紧要
  3. $("#combobox2").combobox({
  4. url:"",
  5. method: "get",
  6. valueField: 'Id',
  7. textField: 'Name',
  8. onSelect: function (record) {//控制树 <----------------------
  9. var url = "/api/customview/Tree?Id=" + record.Id;
  10. $('#tree1').tree({
  11. animate: true,
  12. checkbox: true,
  13. lines: true,
  14. url:url,
  15. method:"get",
  16. onLoadSuccess: function (row, data) {
  17. $(this).tree("collapseAll");//树节点全部闭合
  18. },
  19. toolbar: [{
  20. text: 'Add Group',
  21. iconCls: 'icon-folder-add',
  22. handler: function () {
  23. alert('Add Group');
  24. }
  25. }]
  26. });
  27. }
  28. , onLoadSuccess: function () { //加载完成后,设置选中第一项
  29. var val = $(this).combobox("getData");
  30. for (var item in val[0]) {
  31. if (item == "Id") {
  32. $(this).combobox("select", val[0][item]);
  33. }
  34. }
  35. }
  36. });
  37. $("#combobox1").combobox({
  38. url: "/api/customview/Item1",
  39. method: "get",
  40. valueField: 'Id',
  41. textField: 'Name',
  42. onSelect: function (record) {//控制combobox2 <----------------------
  43. var url = "/api/customview/Item2?Id=" + record.Id;
  44. $("#combobox2").combobox('reload', url);
  45. }
  46. , onLoadSuccess: function () { //加载完成后,设置选中第一项
  47. var val = $(this).combobox("getData");
  48. for (var item in val[0]) {
  49. if (item == "Id") {
  50. $(this).combobox("select", val[0][item]);
  51. }
  52. }
  53. }
  54. });
  55. </script>



相关技术文章

点击QQ咨询
开通会员
返回顶部
×
微信扫码支付
微信扫码支付
确定支付下载
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
  • 支付宝付款
确定支付下载