2017-11-15 4 views

Antwort

0
<!DOCTYPE html> 

<html lang="en"> 

<head> 
    <!-- The jQuery library is a prerequisite for all jqSuite products --> 
    <script type="text/ecmascript" src="./js/jquery.min.js"></script> 
    <!-- This is the Javascript file of jqGrid --> 
    <script type="text/ecmascript" src="./js/jquery.jqGrid.min.js"></script> 
    <!-- This is the localization file of the grid controlling messages, labels, etc. 
    <!-- We support more than 40 localizations --> 
    <script type="text/ecmascript" src="./js/i18n/grid.locale-en.js"></script> 
    <!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom --> 
    <link rel="stylesheet" type="text/css" media="screen" href="./css/jquery-ui-1.10.4.custom.min.css" /> 
    <!-- The link to the CSS that the grid needs --> 
    <link rel="stylesheet" type="text/css" media="screen" href="./css/ui.jqgrid.css" /> 
    <meta charset="utf-8" /> 
    <title>jqTreeGrid - Load On Demand - Load all Rows at once collapsed</title> 
</head> 

<body> 

    <table id="tree"></table> 
    <div id="pager"></div> 

    <script type="text/javascript"> 

     var rows = [ 
      { 
       "category_id": "1", 
       "name": "ELECTRONICS", 
       "price": "0.00", 
       "qty_onhand": "0", 
       "color": "", 
       "lft": "1", 
       "rgt": "44", 
       "level": "0", 
       "uiicon": "" 
      }, 
      { 
       "category_id": "2", 
       "name": "TELEVISIONS", 
       "price": "0.00", 
       "qty_onhand": "0", 
       "color": "", 
       "lft": "2", 
       "rgt": "19", 
       "level": "1", 
       "uiicon": "" 
      }, 
      { 
       "category_id": "3", 
       "name": "TUBE", 
       "price": "0.00", 
       "qty_onhand": "0", 
       "color": "", 
       "lft": "3", 
       "rgt": "8", 
       "level": "2", 
       "uiicon": "" 
      }, 
      { 
       "category_id": "11", 
       "name": "26 \" TV", 
       "price": "200.00", 
       "qty_onhand": "1", 
       "color": "black", 
       "lft": "4", 
       "rgt": "5", 
       "level": "3", 
       "uiicon": "ui-icon-image" 
      }, 
      { 
       "category_id": "12", 
       "name": "30 \" TV", 
       "price": "350.00", 
       "qty_onhand": "2", 
       "color": "black", 
       "lft": "6", 
       "rgt": "7", 
       "level": "3", 
       "uiicon": "ui-icon-document" 
      }, 
      { 
       "category_id": "4", 
       "name": "LCD", 
       "price": "0.00", 
       "qty_onhand": "0", 
       "color": "", 
       "lft": "9", 
       "rgt": "12", 
       "level": "2", 
       "uiicon": "" 
      }, 
      { 
       "category_id": "13", 
       "name": "Super-LCD 42\" ", 
       "price": "400.00", 
       "qty_onhand": "10", 
       "color": "all", 
       "lft": "10", 
       "rgt": "11", 
       "level": "3", 
       "uiicon": "ui-icon-video" 
      }, 
      { 
       "category_id": "5", 
       "name": "PLASMA", 
       "price": "0.00", 
       "qty_onhand": "0", 
       "color": "", 
       "lft": "13", 
       "rgt": "18", 
       "level": "2", 
       "uiicon": "" 
      }, 
      { 
       "category_id": "14", 
       "name": "Ultra-Plasma 62\" ", 
       "price": "440.00", 
       "qty_onhand": "2", 
       "color": "silver", 
       "lft": "14", 
       "rgt": "15", 
       "level": "3", 
       "uiicon": "ui-icon-clipboard" 
      }, 
      { 
       "category_id": "15", 
       "name": "Value Plasma 38\" ", 
       "price": "312.00", 
       "qty_onhand": "0", 
       "color": "silver", 
       "lft": "16", 
       "rgt": "17", 
       "level": "3", 
       "uiicon": "ui-icon-clipboard" 
      }, 
      { 
       "category_id": "6", 
       "name": "PORTABLE ELECTRONICS", 
       "price": "0.00", 
       "qty_onhand": "0", 
       "color": "", 
       "lft": "20", 
       "rgt": "43", 
       "level": "1", 
       "uiicon": "" 
      }, 
      { 
       "category_id": "7", 
       "name": "MP3 PLAYERS", 
       "price": "0.00", 
       "qty_onhand": "0", 
       "color": "", 
       "lft": "21", 
       "rgt": "32", 
       "level": "2", 
       "uiicon": "" 
      }, 
      { 
       "category_id": "8", 
       "name": "FLASH", 
       "price": "0.00", 
       "qty_onhand": "0", 
       "color": "", 
       "lft": "22", 
       "rgt": "29", 
       "level": "3", 
       "uiicon": "" 
      }, 
      { 
       "category_id": "17", 
       "name": "Super-Shuffle 1gb", 
       "price": "20.00", 
       "qty_onhand": "11", 
       "color": "all", 
       "lft": "23", 
       "rgt": "24", 
       "level": "4", 
       "uiicon": "ui-icon-note" 
      }, 
      { 
       "category_id": "21", 
       "name": "5Gb Flash", 
       "price": "0.00", 
       "qty_onhand": "0", 
       "color": "", 
       "lft": "25", 
       "rgt": "26", 
       "level": "4", 
       "uiicon": "ui-icon-comment" 
      }, 
      { 
       "category_id": "22", 
       "name": "10Gb flash ", 
       "price": "0.00", 
       "qty_onhand": "0", 
       "color": "", 
       "lft": "27", 
       "rgt": "28", 
       "level": "4", 
       "uiicon": "ui-icon-tag" 
      }, 
      { 
       "category_id": "16", 
       "name": " Power-MP3 128mb", 
       "price": "123.00", 
       "qty_onhand": "2", 
       "color": "withe", 
       "lft": "30", 
       "rgt": "31", 
       "level": "3", 
       "uiicon": "ui-icon-signal-diag" 
      }, 
      { 
       "category_id": "9", 
       "name": "CD PLAYERS", 
       "price": "0.00", 
       "qty_onhand": "0", 
       "color": "", 
       "lft": "33", 
       "rgt": "38", 
       "level": "2", 
       "uiicon": "" 
      }, 
      { 
       "category_id": "18", 
       "name": " Porta CD ", 
       "price": "10.00", 
       "qty_onhand": "0", 
       "color": "", 
       "lft": "34", 
       "rgt": "35", 
       "level": "3", 
       "uiicon": "ui-icon-eject" 
      }, 
      { 
       "category_id": "19", 
       "name": "CD To go!", 
       "price": "110.00", 
       "qty_onhand": "11", 
       "color": "", 
       "lft": "36", 
       "rgt": "37", 
       "level": "3", 
       "uiicon": "ui-icon-power" 
      }, 
      { 
       "category_id": "10", 
       "name": "2 WAY RADIOS", 
       "price": "0.00", 
       "qty_onhand": "0", 
       "color": "", 
       "lft": "39", 
       "rgt": "42", 
       "level": "2", 
       "uiicon": "" 
      }, 
      { 
       "category_id": "20", 
       "name": "Family Talk 360 ", 
       "price": "200.00", 
       "qty_onhand": "15", 
       "color": "", 
       "lft": "40", 
       "rgt": "41", 
       "level": "3", 
       "uiicon": "ui-icon-volume-on" 
      }, 
      { 
       "category_id": "23", 
       "name": "COMPUTERS", 
       "price": "0.00", 
       "qty_onhand": "0", 
       "color": "", 
       "lft": "45", 
       "rgt": "50", 
       "level": "0", 
       "uiicon": "" 
      }, 
      { 
       "category_id": "25", 
       "name": "DESKTOP ", 
       "price": "0.00", 
       "qty_onhand": "0", 
       "color": "", 
       "lft": "46", 
       "rgt": "47", 
       "level": "1", 
       "uiicon": "" 
      }, 
      { 
       "category_id": "26", 
       "name": "LAPTOPS", 
       "price": "0.00", 
       "qty_onhand": "0", 
       "color": "", 
       "lft": "48", 
       "rgt": "49", 
       "level": "1", 
       "uiicon": "" 
      }, 
      { 
       "category_id": "24", 
       "name": "APPLIANCES", 
       "price": "0.00", 
       "qty_onhand": "0", 
       "color": "", 
       "lft": "51", 
       "rgt": "52", 
       "level": "0", 
       "uiicon": "" 
      } 
     ] 



     jQuery(document).ready(function ($) { 
      jQuery('#tree').jqGrid({ 
       // "url":"data.json", 
       "colModel": [ 
        { 
         "name": "category_id", 
         "index": "accounts.account_id", 
         "sorttype": "int", 
         "key": true, 
         "hidden": true, 
         "width": 50 
        }, { 
         "name": "name", 
         "index": "name", 
         "sorttype": "string", 
         "label": "Name", 
         "width": 170 
        }, { 
         "name": "price", 
         "index": "price", 
         "sorttype": "numeric", 
         "label": "Price", 
         "width": 90, 
         "align": "right" 
        }, { 
         "name": "qty_onhand", 
         "index": "qty_onhand", 
         "sorttype": "int", 
         "label": "Qty", 
         "width": 90, 
         "align": "right" 
        }, { 
         "name": "color", 
         "index": "color", 
         "sorttype": "string", 
         "label": "Color", 
         "width": 100 
        }, { 
         "name": "lft", 
         "hidden": true 
        }, { 
         "name": "rgt", 
         "hidden": true 
        }, { 
         "name": "level", 
         "hidden": true 
        }, { 
         "name": "uiicon", 
         "hidden": true 
        } 
       ], 
       "width": "780", 
       "hoverrows": false, 
       "viewrecords": false, 
       "gridview": true, 
       "height": "auto", 
       "sortname": "lft", 
       "loadonce": true, 
       "rowNum": 100, 
       "scrollrows": true, 
       // enable tree grid 
       "treeGrid": true, 
       // which column is expandable 
       "ExpandColumn": "name", 
       // datatype 
       "treedatatype": "json", 
       // the model used 
       "treeGridModel": "nested", 

       // configuration of the data comming from server 
       "treeReader": { 
        "left_field": "lft", 
        "right_field": "rgt", 
        "level_field": "level", 
        "leaf_field": "isLeaf", 
        "expanded_field": "expanded", 
        "loaded": "loaded", 
        "icon_field": "icon" 
       }, 
       // "sortorder": "asc", 
       "datatype": "local", 
       "data": rows, 
       "pager": "#pager" 
      }); 


     }); 




    </script> 


</body> 

</html> 
+0

Ist es eine Antwort auf Ihre Frage? Sie sollten auf den Link "Bearbeiten" unter dem Text Ihrer Frage klicken, um den Text zu bearbeiten oder der Frage weitere Informationen hinzuzufügen. Sie sollten zusätzlich immer die ** Version ** von jqGrid schreiben, die Sie verwenden (können), und die ** fork ** ([free jqGrid] (https://github.com/free-jqgrid/jqGrid), kommerzielle [Guriddo jqGrid JS] (http://guriddo.net/?page_id=103334) oder ein altes jqGrid in Version <= 4.7) – Oleg

+0

Es ist unklar, wie Sie die Knoten des TreeGrids laden wollen. Der Code enthält kommentierte '" url ":" data.json "' und '" datatype ":" local "," data ": rows' und du verwendest' "treedatatype": "json" '. Wie möchten Sie die Daten laden: von lokalen 'Zeilen' oder vom Server über Ajax-Anfrage, um JSON-Daten zu laden? Wenn "rows" ** full data ** enthält und Sie keine Knoten bei Bedarf laden möchten, sollten Sie in jedes Datenelement die Eigenschaft "loaded: true" einfügen. – Oleg

0

Für Localdata Typ "Can not Eigenschaft 'rowIndex' von undefined lesen", müssen Sie den localReader Parameter konfigurieren:

localReader: { 
    repeatitems: true, 
    // cell: "", 
    id: "category_id" 
} 
Verwandte Themen