dhtmlxCombo ztree

ztree  

Java代码  

1. public function getJsonDataZtree($idsArray)  
2. {  
3.     $result = array();  
4.     foreach ($list as $key => $info) {  
5.         if (in_array($info->id, $idsArray)) {  
6.             $result[$key]['checked'] = true; //勾选  
7.         }  
8.         $result[$key]['id'] = $info->id;  
9.         $result[$key]['pId'] = $info->pid;  
10.         $result[$key]['name'] = $info->name;  
11.         $list = self::model()->getChildList(array('pid' => $info->id));  
12.         if ($list) {  
13.             $result[$key]['open'] = true;  
14.         }  
15.     }  
16.     return json_encode($result);  
17. }  

setting.check.chkboxType勾选 checkbox 对于父子节点的关联关系

onRemove:onRemove,//删除节点后触发，用户后台操作  
onRename:onRename,//编辑后触发，用于操作后台  
addHoverDom:addHoverDom, //添加，用于操作后台 

onCheck: zTreeOnCheck  //点击文字内容

Java代码  

1. function addHoverDom(treeId, treeNode) {  
2.     var sObj = $("#" + treeNode.tId + "_span");  
3.     if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;  
4.     var addStr = "<span class='button add' id='addBtn_" + treeNode.tId + "' title='添加' οnfοcus='this.blur();'></span>";  
5.     sObj.after(addStr);  
6.     var btn = $("#addBtn_" + treeNode.tId);  
7.     if (btn) btn.bind("click", function () {//添加节点后触发，用户后台操作  
8.         var zTree = $.fn.zTree.getZTreeObj(treeId);  
9.         var newNode = newNodeName();  
10.         if (newNode) {  
11.             $.ajax({  
12.                 url:"index.php?c=categories&a=add",  
13.                 type:"post",  
14.                 data:"cid=" + treeNode.id + "&name=" + newNode,  
15.                 success:function (newCount) {  
16.                     zTree.addNodes(treeNode, { id:newCount, pId:treeNode.id, name:newNode});  
17.                 }  
18.             });  
19.         }  
20.         return false;  
21.     });  
22. }  
23. function newNodeName() {  
24.     var tempA = window.prompt('请输入新节点名称', '');  
25.     if (tempA == "" || tempA == null) {  
26.         tempA = "";  
27.     }  
28.     return tempA;  
29. }  
30.   
31. var setting = {  
32.     callback: {  
33.         onClick: zTreeOnClick,//点击选中  
34.         onCheck: getCheckedAll  
35.     }  
36. };  
37.   
38. //获取所有选中节点的值  
39. function zTreeOnClick(event, treeId, treeNode) {  
40.     var treeObj = $.fn.zTree.getZTreeObj(treeId);  
41.     treeObj.checkNode(treeNode);  
42.     if (treeNode.children) {//勾选父级同时修改子的状态  
43.         for (var i = 0; i < treeNode.children.length; i++) {  
44.             treeObj.checkNode(treeNode.children[i], treeNode.checked);  
45.         }  
46.     }  
47.     getCheckedAll(event, treeId, treeNode);  
48. };  
49. function getCheckedAll(event, treeId, treeNode) {  
50.     var treeObj = $.fn.zTree.getZTreeObj(treeId);  
51.     var nodes = treeObj.getCheckedNodes(true);  
52.     //var nodes = treeObj.getSelectedNodes();  
53.     var cid = '';  
54.     for (var i = 0; i < nodes.length; i++) {  
55.         if (cid) {  
56.             cid += ',';  
57.         }  
58.         cid += nodes[i].id;  
59.     }  
60.     $("#category").val(cid); //in2hidden  
61. }  

ztree二级分类的check/radio共存

Java代码  

1. var IDMark_A = "_a";  
2. var setting = {  
3.     view: {  
4.         addDiyDom: addDiyDom  
5.     },  
6.     data: {  
7.         simpleData: {  
8.             enable: true  
9.         }  
10.     },  
11.     callback: {  
12.         onClick: zTreeOnClick  
13.     }  
14. };  
15. function addDiyDom(treeId, treeNode) {  
16.     var aObj = $("#" + treeNode.tId + IDMark_A);  
17.     if (treeNode.level == 0) {  
18.         var editStr = "<input type='checkbox' value='" +treeNode.id+ "' class='checkboxBtn' id='checkbox_" +treeNode.id+ "' οnfοcus='this.blur();'/>";  
19.         aObj.before(editStr);  
20.         var btn = $("#checkbox_"+treeNode.id);  
21.         if (btn) btn.bind("change", function() {checkAccessories(treeNode, btn);});  
22.   
23.         //editpage init  
24.         if(treeNode.checked){  
25.             $("#checkbox_" + treeNode.id).prop("checked", true);  
26.         }  
27.     } else if (treeNode.level == 1) {  
28.         var editStr = "<input type='radio' value='" +treeNode.id+ "' class='radioBtn' id='radio_" +treeNode.id+ "' name='radio_"+treeNode.getParentNode().id+"' οnfοcus='this.blur();'/>";  
29.         aObj.before(editStr);  
30.         var btn = $("#radio_"+treeNode.id);  
31.         if (btn) btn.bind("click", function() {checkBrand(treeNode, btn);});  
32.   
33.         //editpage init  
34.         if(treeNode.checked){  
35.             $("#radio_" + treeNode.id).prop("checked", true);  
36.         }  
37.     }  
38. }  
39. //点checkbox修改radio状态  
40. function checkAccessories(treeNode, btn) {  
41.     var checkedRadio = getCheckedRadio("radio_"+treeNode.id);  
42.     if(checkedRadio){  
43.         if (btn.prop("checked")) {  
44.             if (!checkedRadio) {  
45.                 $("#radio_" + treeNode.children[0].id).prop("checked", true);  
46.             }  
47.         } else {  
48.             checkedRadio.prop("checked", false);  
49.         }  
50.     }else{  
51.         if(treeNode.children){  
52.             $("#radio_" + treeNode.children[0].id).prop("checked", true);  
53.         }  
54.     }  
55.     getCheckVal();  
56. }  
57. //点radio修改checkbox状态  
58. function checkBrand(treeNode, btn) {  
59.     if (btn.prop("checked")) {  
60.         var pObj = $("#checkbox_" + treeNode.getParentNode().id);  
61.         if (!pObj.prop("checked")) {  
62.             pObj.prop("checked", true);  
63.         }  
64.     }  
65.     getCheckVal();  
66. }  
67.   
68. function getCheckedRadio(radioName) {  
69.     var r = document.getElementsByName(radioName);  
70.     for(var i=0; i<r.length; i++)    {  
71.         if(r[i].checked)    {  
72.             return $(r[i]);  
73.         }  
74.     }  
75.     return null;  
76. }  
77.   
78. function getCheckVal() {  
79.     var ids = [];  
80.     $("#treeDemo input:checked").each(function () {  
81.         ids.push($(this).val());  
82.     });  
83.     //$("#category").val(ids.join(","));  
84. }  
85. //点标题勾选  
86. function zTreeOnClick(event, treeId, treeNode) {  
87.     if(treeNode.level == 0){  
88.         var btn = $("#checkbox_"+treeNode.id);  
89.         var current = $("#checkbox_" + treeNode.id).prop("checked");  
90.         $("#checkbox_" + treeNode.id).prop("checked", !current);  
91.         checkAccessories(treeNode, btn);  
92.     }else{  
93.         var btn = $("#radio_" + treeNode.id);  
94.         $("#radio_" + treeNode.id).prop("checked", true);  
95.         checkBrand(treeNode, btn);  
96.     }  
97. };  

 htmlxCombo是一个跨平台的，具有Autocomplete功能，支持Ajax的combobox。

发送请求（来自dhtmlXCommon.js）可以修改请求方式，传递参数等

Java代码  

1. dtmlXMLLoaderObject.prototype.loadXML = function  

 

Java代码  

1. <link rel="STYLESHEET" type="text/css" href="global/dhtmlxCombo/dhtmlxcombo.css">  
2. <script type="text/javascript">  
3.      window.dhx_globalImgPath="global/dhtmlxCombo/imgs/";  
4. </script>  
5. <script  type="text/javascript" src="global/dhtmlxCombo/dhtmlxcommon.js"></script>  
6. <script type="text/javascript"  src="global/dhtmlxCombo/dhtmlxcombo.js"></script>  

Java代码  

1. <h3>From select box</h3>  
2. <select style='width:200px;'  id="combo_zone1" name="alfa1">  
3. <option value="1">a00</option>  
4. <option value="2">a01</option>  
5. </select>  
6. <script>  
7. var z = dhtmlXComboFromSelect("combo_zone1",'225');  
8. z.enableFilteringMode(true);  
9. </script>  

<div id="combo_zone1" style="width:155px;"></div>
<script type="text/JavaScript">
    var z=new dhtmlXCombo("combo_zone1","msgtoid ","155");
    z.loadXML("Main.php?do=messageManage&method=autoCompletePM");
    z.enableFilteringMode(true);
</script> 

生成xml,支持中文

Java代码  

1. function autoCompletePM()  
2. {  
3.     $pm_list = $this->delegate->getMemberListInfo();  
4.     header("Content-type:text/xml");  
5.     print("<?xml version=\"1.0\" encoding=\"gb2312\" ?>");  
6.     echo "<complete>";  
7.     foreach ($pm_list as $pm) {  
8.   
9.         $select = ($pm['vendorid'] == $_GET['id']) ? 'selected="1"' : "";  
10.         echo '<option value="' . $pm['id'] . '" ' . $select . '>' . $pm['name'] . '</option>';  
11.     }  
12.     echo "</complete>";  
13. }  

回显1

xml默认选中 清空默认选中unSelectOption

<option value="3" selected="1">three</option>

xml带图片setChecked(index,mode)

<option value="2" img_src="../common/images/books.gif">two</option>

事件绑定event 见api

Java代码  

1. combo . attachEvent ( " onChange " , onChangeFunc ) ;  
2. combo . attachEvent ( " onKeyPressed " , onKeyPressedFunc ) ;  
3. combo . attachEvent ( " onSelectionChange " , onSelectionChangeFunc ) ;  
4. combo . attachEvent ( " onBlur " , onBlurFunc ) ;  
5.   
6. function onChangeFunc ( ) {  $.get('?m=content&c=push&a=public_ajax_get', {html: z.getSelectedValue(), id:'typeid', action: '_get_type', module: 'special'}, function(data) {$('#specialid_td').html(data)}); }  
7. function onKeyPressedFunc ( key ) { doLog ( " Key " + key + " was pressed " ) ; return true ; }  
8. function onSelectionChangeFunc ( ) { doLog ( " Selection was changed " ) ; return true ; }  
9. function onBlurFunc ( ) {       
10. name = this.DOMelem_hidden_input.name  
11. alert(name.substring(name.length-1)); doLog ( " " + ' onBlur ' + " event has occured " ) ; return true ;   
12. }   

4. combobox怎样做readonly,disable

z.getSelectedText()
z.getSelectedValue()
z.getComboText()

Java代码  

1. combo_zone1 =new dhtmlXCombo("combo_zone1", "alfa1", 90);  
2. combo_zone1.readonly(1);  
3. //combo_zone1.disable(1);  
4. //combo_zone1.show(1)