dhtmlxCombo ztree-白红宇

ztree

       Java代码   
public function getJsonDataZtree($idsArray)  
{  
    $result = array();  
    foreach ($list as $key => $info) {  
        if (in_array($info->id, $idsArray)) {  
            $result[$key]['checked'] = true; //勾选  
        }  
        $result[$key]['id'] = $info->id;  
        $result[$key]['pId'] = $info->pid;  
        $result[$key]['name'] = $info->name;  
        $list = self::model()->getChildList(array('pid' => $info->id));  
        if ($list) {  
            $result[$key]['open'] = true;  
        }  
    }  
    return json_encode($result);  
}  

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

onRemove:onRemove,//删除节点后触发，用户后台操作

onRename:onRename,//编辑后触发，用于操作后台

addHoverDom:addHoverDom, //添加，用于操作后台

onCheck: zTreeOnCheck //点击文字内容

       Java代码   
function addHoverDom(treeId, treeNode) {  
    var sObj = $("#" + treeNode.tId + "_span");  
    if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;  
    var addStr = "<span class='button add' id='addBtn_" + treeNode.tId + "' title='添加' οnfοcus='this.blur();'></span>";  
    sObj.after(addStr);  
    var btn = $("#addBtn_" + treeNode.tId);  
if (btn) btn.bind("click", function () { 
//添加节点后触发，用户后台操作
        var zTree = $.fn.zTree.getZTreeObj(treeId);  
        var newNode = newNodeName();  
        if (newNode) {  
            $.ajax({  
                url:"index.php?c=categories&a=add",  
                type:"post",  
                data:"cid=" + treeNode.id + "&name=" + newNode,  
                success:function (newCount) {  
                    zTree.addNodes(treeNode, { id:newCount, pId:treeNode.id, name:newNode});  
                }  
            });  
        }  
        return false;  
    });  
}  
function newNodeName() {  
    var tempA = window.prompt('请输入新节点名称', '');  
    if (tempA == "" || tempA == null) {  
        tempA = "";  
    }  
    return tempA;  
}  
  
var setting = {  
    callback: {  
        onClick: zTreeOnClick,//点击选中  
        onCheck: getCheckedAll  
    }  
};  
  
//获取所有选中节点的值  
function zTreeOnClick(event, treeId, treeNode) {  
    var treeObj = $.fn.zTree.getZTreeObj(treeId);  
    treeObj.checkNode(treeNode);  
if (treeNode.children) { 
//勾选父级同时修改子的状态
        for (var i = 0; i < treeNode.children.length; i++) {  
            treeObj.checkNode(treeNode.children[i], treeNode.checked);  
        }  
    }  
    getCheckedAll(event, treeId, treeNode);  
};  
function getCheckedAll(event, treeId, treeNode) {  
    var treeObj = $.fn.zTree.getZTreeObj(treeId);  
    var nodes = treeObj.getCheckedNodes(true);  
    //var nodes = treeObj.getSelectedNodes();  
    var cid = '';  
    for (var i = 0; i < nodes.length; i++) {  
        if (cid) {  
            cid += ',';  
        }  
        cid += nodes[i].id;  
    }  
    $("#category").val(cid); //in2hidden  
}  

ztree二级分类的check/radio共存

       Java代码   
var IDMark_A = "_a";  
var setting = {  
    view: {  
        addDiyDom: addDiyDom  
    },  
    data: {  
        simpleData: {  
            enable: true  
        }  
    },  
    callback: {  
        onClick: zTreeOnClick  
    }  
};  
function addDiyDom(treeId, treeNode) {  
    var aObj = $("#" + treeNode.tId + IDMark_A);  
    if (treeNode.level == 0) {  
        var editStr = "<input type='checkbox' value='" +treeNode.id+ "' class='checkboxBtn' id='checkbox_" +treeNode.id+ "' οnfοcus='this.blur();'/>";  
        aObj.before(editStr);  
        var btn = $("#checkbox_"+treeNode.id);  
        if (btn) btn.bind("change", function() {checkAccessories(treeNode, btn);});  
  
        //editpage init  
        if(treeNode.checked){  
            $("#checkbox_" + treeNode.id).prop("checked", true);  
        }  
    } else if (treeNode.level == 1) {  
        var editStr = "<input type='radio' value='" +treeNode.id+ "' class='radioBtn' id='radio_" +treeNode.id+ "' name='radio_"+treeNode.getParentNode().id+"' οnfοcus='this.blur();'/>";  
        aObj.before(editStr);  
        var btn = $("#radio_"+treeNode.id);  
        if (btn) btn.bind("click", function() {checkBrand(treeNode, btn);});  
  
        //editpage init  
        if(treeNode.checked){  
            $("#radio_" + treeNode.id).prop("checked", true);  
        }  
    }  
}  
//点checkbox修改radio状态  
function checkAccessories(treeNode, btn) {  
    var checkedRadio = getCheckedRadio("radio_"+treeNode.id);  
    if(checkedRadio){  
        if (btn.prop("checked")) {  
            if (!checkedRadio) {  
                $("#radio_" + treeNode.children[0].id).prop("checked", true);  
            }  
        } else {  
            checkedRadio.prop("checked", false);  
        }  
    }else{  
        if(treeNode.children){  
            $("#radio_" + treeNode.children[0].id).prop("checked", true);  
        }  
    }  
    getCheckVal();  
}  
//点radio修改checkbox状态  
function checkBrand(treeNode, btn) {  
    if (btn.prop("checked")) {  
        var pObj = $("#checkbox_" + treeNode.getParentNode().id);  
        if (!pObj.prop("checked")) {  
            pObj.prop("checked", true);  
        }  
    }  
    getCheckVal();  
}  
  
function getCheckedRadio(radioName) {  
    var r = document.getElementsByName(radioName);  
    for(var i=0; i<r.length; i++)    {  
        if(r[i].checked)    {  
            return $(r[i]);  
        }  
    }  
    return null;  
}  
  
function getCheckVal() {  
    var ids = [];  
    $("#treeDemo input:checked").each(function () {  
        ids.push($(this).val());  
    });  
    //$("#category").val(ids.join(","));  
}  
//点标题勾选  
function zTreeOnClick(event, treeId, treeNode) {  
    if(treeNode.level == 0){  
        var btn = $("#checkbox_"+treeNode.id);  
        var current = $("#checkbox_" + treeNode.id).prop("checked");  
        $("#checkbox_" + treeNode.id).prop("checked", !current);  
        checkAccessories(treeNode, btn);  
    }else{  
        var btn = $("#radio_" + treeNode.id);  
        $("#radio_" + treeNode.id).prop("checked", true);  
        checkBrand(treeNode, btn);  
    }  
};  

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

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

       Java代码   
dtmlXMLLoaderObject.prototype.loadXML = function  

       Java代码   
<link rel="STYLESHEET" type="text/css" href="global/dhtmlxCombo/dhtmlxcombo.css">  
<script type="text/javascript">  
     window.dhx_globalImgPath="global/dhtmlxCombo/imgs/";  
</script>  
<script  type="text/javascript" src="global/dhtmlxCombo/dhtmlxcommon.js"></script>  
<script type="text/javascript"  src="global/dhtmlxCombo/dhtmlxcombo.js"></script>  

       Java代码   
<h3>From select box</h3>  
<select style='width:200px;'  id="combo_zone1" name="alfa1">  
<option value="1">a00</option>  
<option value="2">a01</option>  
</select>  
<script>  
var z = dhtmlXComboFromSelect("combo_zone1",'225');  
z.enableFilteringMode(true);  
</script>  

var z=new dhtmlXCombo("combo_zone1","msgtoid ","155");

z.loadXML("Main.php?do=messageManage&method=autoCompletePM");

z.enableFilteringMode(true);

</script>

生成xml,支持中文

       Java代码   
function autoCompletePM()  
{  
    $pm_list = $this->delegate->getMemberListInfo();  
    header("Content-type:text/xml");  
    print("<?xml version=\"1.0\" encoding=\"gb2312\" ?>");  
    echo "<complete>";  
    foreach ($pm_list as $pm) {  
  
        $select = ($pm['vendorid'] == $_GET['id']) ? 'selected="1"' : "";  
        echo '<option value="' . $pm['id'] . '" ' . $select . '>' . $pm['name'] . '</option>';  
    }  
    echo "</complete>";  
}  

回显1

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

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

xml带图片setChecked(index,mode)

事件绑定event 见api

       Java代码   
combo . attachEvent ( " onChange " , onChangeFunc ) ;  
combo . attachEvent ( " onKeyPressed " , onKeyPressedFunc ) ;  
combo . attachEvent ( " onSelectionChange " , onSelectionChangeFunc ) ;  
combo . attachEvent ( " onBlur " , onBlurFunc ) ;  
  
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)}); }  
function onKeyPressedFunc ( key ) { doLog ( " Key " + key + " was pressed " ) ; return true ; }  
function onSelectionChangeFunc ( ) { doLog ( " Selection was changed " ) ; return true ; }  
function onBlurFunc ( ) {       
name = this.DOMelem_hidden_input.name  
alert(name.substring(name.length-1)); doLog ( " " + ' onBlur ' + " event has occured " ) ; return true ;   
}   

4. combobox怎样做readonly,disable

z.getSelectedText()

z.getSelectedValue()

z.getComboText()

       Java代码   
combo_zone1 =new dhtmlXCombo("combo_zone1", "alfa1", 90);  
combo_zone1.readonly(1);  
//combo_zone1.disable(1);  
//combo_zone1.show(1)  