dhtmlx ztree fancytree

fancytree适合做树形表格

$("#tree").fancytree({
    extensions: ["table"],
    checkbox: true,
    //selectMode: 3, // 1:single, 2:multi, 3:multi-hier
    icons: false,
    table: {
        indentation: 16,      // indent 20px per node level
        nodeColumnIdx: 2,     // render the node title into the 2nd column
        checkboxColumnIdx: 0  // render the checkboxes into the 1st column
    },
    source: {
        url: "ajax-tree-products.json"
    },
    select: function(event, data) {
        // Display list of selected nodes
        var selNodes = data.tree.getSelectedNodes();
        // Get a list of all selected TOP nodes
        //var selRootNodes = data.tree.getSelectedNodes(true);

        // convert to key array
        var selKeys = jQuery.map(selNodes, function(node){
            console.log(node);
            return node.key;
        });
        alert(selKeys.join(", "));
    },
    renderColumns: function (event, data) {
        var node = data.node, $tdList = $(node.tr).find(">td");
        $tdList.eq(1).text(node.key);
        //$tdList.eq(0).html('<input type="input" name="ids[]" value="'+node.data.listorder+'">');
    }
});

 

ztree  

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  //点击文字内容

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

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）可以修改请求方式，传递参数等

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

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