dhtmlxCombo dhtmlXTree ztree

ztree  

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

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

onCheck: zTreeOnCheck

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='添加' onfocus='this.blur();'></span>";
    sObj.after(addStr);
    var btn = $("#addBtn_" + treeNode.tId);
    if (btn) btn.bind("click", function () {//添加节点后触发，用户后台操作
        var zTree = $.fn.zTree.getZTreeObj(treeId);
//            var cid = treeNode.tId.replace(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;
}
//获取所有选中节点的值
function getCheckedAll(treeId) {
    var treeObj = $.fn.zTree.getZTreeObj(treeId);
    var nodes = treeObj.getCheckedNodes(true);
    cid = '';
    for (var i = 0; i < nodes.length; i++) {
        if(cid){
            cid+=',';
        }
        cid+=nodes[i].id;
    }
    $("#cid").val(cid); //in2hidden
}

dhtmlXTree 

使用智能XML解析的话需要手工设置

半选状态(checked="-1"); 设置父节点为半选转态，但下面的子节点全部选中，父节点状态自动切换成全选了
Checkboxes可以被禁用-disableCheckbox(id,state)

SELECT - 插入后选择此结点
CALL - 在选择时调用方法
TOP - 在最上方插入此结点
CHILD - 此结点有子结点
CHECKED - 此结点的多选框被选中(如果有的话)

disabled ="1" 此结点的多选框被禁用

<script>
function toncheck(id, state) {
	$("#menu_ids").val(tree2.getAllChecked()+","+tree2.getAllPartiallyChecked());
}
tree2 = new dhtmlXTreeObject("treeboxbox_tree2", "100%", "100%", 0);

tree2.setSkin('dhx_skyblue');
tree2.setImagePath("../js/tree/imgs/csh_bluebooks/");
tree2.enableCheckBoxes(1);
tree2.enableThreeStateCheckboxes(true);//
tree2.setOnCheckHandler(toncheck);
//tree2.setOnLoadingEnd(toncheck);
tree2.loadXML("../admin.php?r=role/menu");
</script>

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

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

dtmlXMLLoaderObject.prototype.loadXML = function

 

<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>

<h3>From select box</h3>
<select style='width:200px;'  id="combo_zone1" name="alfa1">
<option value="1">a00</option>
<option value="2">a01</option>
<option value="3">a02</option>
<option value="4">a10</option>
<option value="5">a11</option>
<option value="6">a12</option>
</select>
<script>
var z = dhtmlXComboFromSelect("combo_zone1",'225');
z.enableFilteringMode(true);
</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,支持中文

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>";
}

转化成html后

<div style="width: 155px;" class="dhx_combo_box ">

<input type="text" autocomplete="off" class="dhx_combo_input" tabindex="0" style="width: 136px;">

<input type="hidden" name="msgtoid" value="111">

<input type="hidden" name="msgtoid_new_value " value="true">

<img class="dhx_combo_img" src="global/dhtmlxCombo/imgs/combo_select.gif"></div>

msgtoid_new_value的值是TRUE时 说明msgtoid的值在xml option value中不存在，也可以用readonly

if(document.message.msgtoid_new_value.value=='true'){
            alert('收件人不存在！');
 }

 

得到两个hidden对象

z.DOMelem_hidden_input;
z.DOMelem_hidden_input2;

this.DOMelem_hidden_input.name = name;
this.DOMelem_hidden_input2 = name.replace(/(\]?)$/, "_new_value$1"); 

回显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

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()

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

5.Combobox with images and checkboxes

  var combo = new dhtmlXCombo("combo_zone","alfa",200,"image");
  z.setDefaultImage("../images/book.gif");

6.级联选框 需要ext/dhtmlxcombo_group.js

When some option is selected in the parent combo, the server-side script (“combo2.php” in the example above) receives the value of this option with the request;
the name of this parameter is “parent”. Such a functionality allows to form xml stream depending on parent's value using any server-side language.
combo2.php?parent =PARENT_VALUE

var z2=new dhtmlXCombo("combo_zone2","alfa2",200);
var z=new dhtmlXCombo("combo_zone","alfa1",200);
z.enableFilteringMode(true);
z.attachChildCombo(z2,"combo2.php");
z.loadXML("combo1.xml");

XML解析错误：xml处理指令不在实体的开始部分

<?xml 必须放到第一行前面没有空格或回车。如果php生成xml的代码中 <?php前面有空格也会一样