compbotreeは葉っぱのノードしか選択できません.

13114 ワード
javascript 先端
compbotreeは葉っぱのノードしか選択できません.
一、アプリ
人の悪事は人の師となり、言葉を慎む.
二、サマリー
二つの状況に分けるべきです.
1.第一の場合(単一):multiple==false
$('#tt').combotree({
        nultiple: false,
        onBeforeSelect: function (node) {
            if (!$(this).tree('isLeaf', node.target)) {
                return false;
            } 
        }
        // onBeforeCheck: function (node) {
        //  if (!$(this).tree('isLeaf', node.target)) {
        //      return false;
        //  }
        // }
});
2.第二の場合(複数選択):multiple==true
$('#tt').combotree({
        nultiple: true,
        // onBeforeSelect: function (node) {
        //  if (!$(this).tree('isLeaf', node.target)) {
        //      return false;
        //  } 
        // },
        onBeforeCheck: function (node) {
            if (!$(this).tree('isLeaf', node.target)) {
                return false;
            }
        }
});
二つとも書いても大丈夫です.もっと事件を処理します.
三、コードの貼り付け
1.htmlコード
htmlにおける依存:jsファイルとcssファイルは自分でeasuyui公式サイトへダウンロードする必要があります.


<html>
<head>
    <meta charset="UTF-8">
    <title>Basic ComboTree - jQuery EasyUI Demotitle>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js">script>
    <script type="text/javascript" src="../../jquery.easyui.min.js">script>
head>
<body>
    <h2>Basic ComboTreeh2>
    <p>Click the right arrow button to show the tree panel.p>
    <div style="margin:20px 0">div>
    <div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
        <div style="margin-bottom:20px">
            <input id="tt"  style="width: 100%;">
            
        div>
    div>
body>
<script>
    $('#tt').combotree({
        url: 'tree_data1.json',
        method:'get',
        label: 'Select Node:', 
        labelPosition: 'top',
        multiple: true,
        onBeforeSelect: function (node) {
            if (!$(this).tree('isLeaf', node.target)) {
                return false;
            } 
        },
        onBeforeCheck: function (node) {
            if (!$(this).tree('isLeaf', node.target)) {
                return false;
            }
        }
    });
script>
html>
2、tree_data 1.jsonファイル
jsonファイルとhtmlファイルをディレクトリの下に置いてもいいです.

[{
    "id":1,
    "text":"My Documents",
    "children":[{
        "id":11,
        "text":"Photos",
        "state":"closed",
        "children":[{
            "id":111,
            "text":"Friend"
        },{
            "id":112,
            "text":"Wife"
        },{
            "id":113,
            "text":"Company"
        }]
    },{
        "id":12,
        "text":"Program Files",
        "children":[{
            "id":121,
            "text":"Intel"
        },{
            "id":122,
            "text":"Java",
            "attributes":{
                "p1":"Custom Attribute1",
                "p2":"Custom Attribute2"
            }
        },{
            "id":123,
            "text":"Microsoft Office"
        },{
            "id":124,
            "text":"Games",
            "checked":true
        }]
    },{
        "id":13,
        "text":"index.html"
    },{
        "id":14,
        "text":"about.html"
    },{
        "id":15,
        "text":"welcome.html"
    }]
}]
四、supplement
設定パラメータを複写して、多くのバグを解決できます.
  • 前に一度会ったことがありますが、combotreeの中の値が選択された後にboxに表示されないのは、フレームの中でcompbotreeの操作が多いからです.最終的な解決策は、jqueryでdomを取得し、compbotreeを複写した後、ノードを選択するたびに、boxに正常に表示されます.
  • 私はdatagridの二重表の問題を処理する時、grid Definedを複写した後に、initGrid、その後双表の頭のディスプレイのbugは消えました.もちろん、最終的にはtd domの要素を操作して、簡単に書きます.
    • フュージョンcharts-suite-xtでデータを作成した統計図を表示します.