Analisis ringkas panduan penggunaan pokok dalam jQuery EasyUI

Artikel ini merekodkan bahawa apabila mengetuai ahli membangunkan fungsi modul kecil, mereka perlu menggunakan tetingkap timbul untuk memuatkan pilihan unit lata seperti pokok, dan akhirnya memutuskan untuk menggunakan pemalam jQuery EasyUI untuk pembangunan. Walau bagaimanapun, saya menghadapi banyak masalah apabila menggunakan pemalam pokok dalam EasyUI. Untuk meningkatkan kelajuan paparan pokok pop timbul, kami menggunakan pemuatan tak segerak bagi nilai nod Pertama, nod akar dimuatkan, dan kemudian nod anak dimuatkan mengikut nod yang diklik.

Selalunya keputusan adalah berbeza daripada apa yang dijangkakan Saya telah keliru selama beberapa hari Selepas pengembangan, nod kanak-kanak dimuatkan secara dinamik, tetapi selepas mengecut, data yang diisi sebelum ini tidak dapat dikosongkan untuk kali kedua , nod anak dimuatkan sekali lagi, data dipaparkan berulang kali, dan tiada kaedah untuk mengosongkan nod anak. Selepas mencuba pelbagai cara untuk menyelesaikan masalah ini, kami hanya boleh memuatkan nilai nod anak dalam bentuk lain Simpan setiap nilai nod dan tentukan sama ada ia sudah wujud, muatkannya tanpa memuatkan.

Lihat contoh untuk dua kaedah:

Salin kod Kod adalah seperti berikut:

var treeTitle = '选择列表';

var treeUrl = '../DataAshx/getTreeNode.ashx?pid=-1';

var nodeExp=false;

var nodekeep="";

baris var;

var noinf=0;

$(fungsi() {

    $('#treewindow').window({

        tajuk: treeTitle,

        lebar: 400,

        ketinggian: 400,

        modal: benar,

        bayang: palsu,

        ditutup: benar,

        boleh diubah saiz: palsu,

        boleh dimaksimumkan: palsu,

        boleh diminimumkan: palsu,

        boleh dilipat: palsu

    });

});

function treeWindowOpen(nama,rowIndx) {

    $('#treewindow').window('open');

    nodekeep="";

    nodeExp=false;

    rows=rowIndx.toString();

    $('#basetree').tree({

        kotak semak: benar,

        bernyawa: benar,

        url: treeUrl "&coln=" escape(name.toString()),

        lataSemak: benar,

        onlyLeafCheck: palsu,

        onBeforeExpand: fungsi(nod, param) {

//------------第一种方法：异步加载子节点值-------------

//            $('#basetree').tree('options').url = "../DataAshx/getTreeNode.ashx?pid=" node.id "&coln=" escape(name.toString());

//------------第二种方法：Ajax方法返回子节点Json值，使用append方法加载子节点         
                taip: "POST",

                url: "../DataAshx/getTreeNode.ashx?pid=" node.id "&coln=" escape(name.toString()) "&casn=" escape(node.attributes.cas.toString()),

                cache: palsu,

                async: palsu,

                dataType: "json",

                kejayaan: fungsi(data) {

                    if(nodekeep.indexOf(node.id)==-1)

                    {

                     tambah(data, nod);

                     nodeExp = benar;

                    }

                }

            });

            $("#radCollapse").removeAttr("checked");

        },

        onLoadError:function(Error)

        {

            $.messager.alert('提示', '查询语句出错', 'error');

            if(nodeExp==false)

            {

                $("#basetree").kanak-kanak().buang();

            }

        },

        onLoadSuccess:function(success)

        {

            var child=$("#basetree").kanak-kanak().panjang;
            noinf ;

            jika(anak==0&&noinf>1)

            {

                $.messager.alert('提示', '数据不存在', 'Info');

            }

        }

    });

}

function treeWindowClose() {

    $('#treewindow').window('close');

    nodekeep="";

    nodekeep=false;

}

function treeWindowSubmit() {

    nod var = $('#basetree').tree('getChecked');

    var info = '';

    jika (nod.panjang > 0) {

        untuk (var i = 0; i < nodes.length; i ) {

            jika (maklumat != '') { maklumat = ','; }

            info = nod[i].teks;

        }

        //alert(JSON.stringify(nodes));

    }

    lain {

        nod var = $('#basetree').tree('getSelected');

        jika (nod != null) {

            info = node.text;                

        }

    }

    $("#" rows).val(info);

    $('#treewindow').window('close');

    nodekeep="";

    nodeExp=false;

}

//全部展开

fungsi runtuhSemua() {

    $("#radCollapse").attr("checked", "checked");

    nod var = $('#basetree').tree('getSelected');

    jika (nod) {

        $('#basetree').tree('collapseAll', node.target);

    } lain {

        $('#basetree').tree('collapseAll');

    }

}

//全部收缩

fungsi kembangkanSemua() {

    nod var = $('#basetree').tree('getSelected');

    jika (nod) {

        $('#basetree').tree('expandAll', node.target);

    } lain {

        $('#basetree').tree('expandAll');

    }

}

//增加子节点

fungsi tambah(data,cnode) {

    var nod = cnode;

    $('#basetree').tree('tambah', {

        ibu bapa: node.target,

        data: data

    });

    nodekeep ="," node.id;

}

//重新加载

muat semula fungsi() {

    nod var = $('#basetree').tree('getSelected');

    jika (nod) {

        $('#basetree').tree('reload', node.target);

    } lain {

        $('#basetree').tree('muat semula');

    }

}

//删除子节点

function remove() {

    nod var = $('#basetree').tree('getSelected');

    $('#basetree').tree('remove',node.target);

}

　　页面getTreeNode.ashx返回树节点JSON格式数据：

复制代码代码如下:

<%@ WebHandler Language="C#" Class="getTreeNode" %>
menggunakan Sistem;
menggunakan System.Collections;
menggunakan System.Data;
menggunakan System.Linq;
menggunakan System.Web;
menggunakan System.Web.Services;
menggunakan System.Web.Services.Protocols;
menggunakan System.Xml.Linq;
menggunakan System.Collections.Generic;

kelas awam getTreeNode : IHttpHandler, System.Web.SessionState.IRequiresSessionState
{
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "teks/plain";
        DataTable dt = (DataTable)context.Session["viewmaintain"];
        rentetan parentId = rentetan.Kosong;
        rentetan keputusanStr = rentetan.Kosong;
        atribut rentetan = rentetan.Kosong;
        rentetan colName = rentetan.Kosong;
        rentetan sql = rentetan.Kosong;
        rentetan Casname = rentetan.Kosong;
        bool colt = palsu;
        ikon rentetan = "ikon-profil";
        if (!string.IsNullOrEmpty(context.Request.QueryString["pid"]))
        {
            parentId = context.Request.QueryString["pid"].ToString();
        }
        if ((!string.IsNullOrEmpty(context.Request.QueryString["coln"])) && (string.IsNullOrEmpty(context.Request.QueryString["casn"])))
        {
            colName = HttpUtility.UrlDecode(context.Request.QueryString["coln"].ToString());
            jika (dt != null)
            {
                bool pt = benar;
                manakala (pt)
                {
                    untuk (int i = 0; i < dt.Rows.Count; i )
                    {
                        Casname = dt.Rows[i]["view_colname"].ToString();
                        if (dt.Rows[i]["view_colname"].ToString() == colName)
                        {
                            if (dt.Rows[i]["view_cas"].ToString() != null&&dt.Rows[i]["view_cas"].ToString() !="")
                            {
                                colName = dt.Rows[i]["view_cas"].ToString();
                            }
                            lain
                            {
                                kuda jantan = benar;
                                sql = dt.Rows[i]["view_sql"].ToString();
                                pt = palsu;
                            }
                            rehat;
                        }
                    }
                }
            }
        }
        if ((!string.IsNullOrEmpty(context.Request.QueryString["casn"])) && (!string.IsNullOrEmpty(context.Request.QueryString["coln"])))
        {
           rentetan casnName = HttpUtility.UrlDecode(context.Request.QueryString["casn"].ToString());
           colName = HttpUtility.UrlDecode(context.Request.QueryString["coln"].ToString());
            jika (dt != null)
            {
                untuk (int i = 0; i < dt.Rows.Count; i )
                {
                    Casname = dt.Rows[i]["view_colname"].ToString();
                    if (dt.Rows[i]["view_cas"].ToString() == casnName && casnName != colName)
                    {
                        kuda jantan = benar;
                        sql = dt.Rows[i]["view_sql"].ToString();
                        rehat;
                    }
                }
            }
        }
        cuba
        {
            jika (parentId != "" && colt == benar)
            {
                //此处省略得到数据列表的代码
                Senaraikan ltree = DAL_TreeInfo.GetItemValue(parentId, sql);
                resultStr = "";
                resultStr = "[";
                jika (ltree.Count > 0)
                {
                    foreach (item TreeInfo dalam ltree)
                    {
                        atribut = "";
                        atribut = "{"cas":"" Casname;
                        atribut = "","val":"" item._text ""}";
                        resultStr = "{";
                        resultStr = string.Format(""id": "{0}", "text": "{1}", "iconCls": "{2}", "attributes": {3}, "state": " ditutup"", item._id, item._text, ikon, atribut);
                        resultStr = "},";
                    }
                    resultStr = resultStr.Substring(0, resultStr.Length - 1);
                }
                resultStr = "]";
            }
            lain
            {
                resultStr = "[]";
            }
        }
        tangkapan (Exception ex)
        {
            resultStr = "出错";
        }
        context.Response.Write(resultStr);
    }
    public bool Boleh Digunakan Semula
    {
        dapatkan
        {
            pulangkan palsu;
        }
    }
}