jqGrid树网格 - 没有显示?

时间:2015-10-28 16:57:18

标签: javascript json jqgrid treegrid

有一个概念让我望而却步......我无法弄清楚我做错了什么! 我有以下JSON:

{
 "data":[
  {
     "amount":150.00,
     "dealDate":"10/18/15 11:53 AM",
     "dealName":"Deal 1",
     "id":"1",
     "parent":"null", 
     "level":"0", 
     "isLeaf":false, 
     "loaded":true        
  },
  {
     "amount":100.00,
     "dealDate":"10/16/15 11:53 AM",
     "dealName":"Deal 1a",
     "id":"2",
     "parent":"1", 
     "level":"1", 
     "isLeaf":true, 
     "loaded":true        
  },
  {
     "amount":-20.34,
     "dealDate":"10/16/15 11:53 AM",
     "dealName":"Deal 1b",
     "id":"3",
     "parent":"1", 
     "level":"1", 
     "isLeaf":true, 
     "loaded":true 
  },
  {
     "amount":25,
     "dealDate":"10/16/15 11:53 AM",
     "dealName":"Deal 2",
     "id":"4",
     "parent":"null", 
     "level":"0", 
     "isLeaf":false, 
     "loaded":true           
  }
 ]
}

jQgrid定义:(删除了treeGrid选项(注释掉))

<script type="text/javascript">
  $(function () {

    var mydata ;
        $.getJSON( "sampleData.json", function( data ) {
          mydata=$.extend(true, [], data.data) ;

    console.log("Initial JSON data:\n" + JSON.stringify(mydata));

         $("#list").jqGrid({
         data: mydata,           
         datatype: "local",
         mtype: "GET",
         colNames: ["id", "Title", "Amount", "Date", "","","",""],
         colModel: [                    
             { name: "id", width: 55, hidden: true},                 
             { name: "dealName", width: 90, editable: true },
             { name: "amount", width: 80, align: "right",editable: true },
             { name: "dealDate", width: 80, align: "right", editable: true }
            { name: "parent", width: 80, align: "right", hidden: true },
            { name: "level", width: 80, align: "right", hidden: true },
             { name: "isLeaf", width: 80, align: "right", hidden: true },
             { name: "loaded", width: 80, align: "right", hidden: true }
         ],
         editurl: 'clientArray',
         cellsubmit : 'clientArray',             
         rowNum: 10,
         rowList: [10, 20, 30, 50],
         sortname: "id",
         viewrecords: true,
         gridview: true,
 //              treeGrid: true,
 //              ExpandColumn: 'dealName',
 //              treeGridModel:'adjacency',                  
         width: $(window).width() *0.55,
         caption: "Deal Test Grid"      
     });
    $("#list").jqGrid('navGrid', "#pager", { edit: false, add: false, del:   
     false });
     $("#list").jqGrid('gridResize');
      });
  }); 
 </script>

这会产生完美的网格!! enter image description here 然而! 一旦我从树网格参数中删除注释,我的网格就不会被加载! enter image description here

我尝试过添加和删除没有父级的父级空值的引号

         "parent":"null", vs.          "parent":null,  

无济于事!!结果相同!! 请帮忙 !!它叫什么 - 我做错了什么。

1 个答案:

答案 0 :(得分:1)

您的代码中存在一些问题。首先,它是library(shiny) library(shinyjs) jsCode <- "shinyjs.setCol = function(params){ var defaultParams = { id: null, color : 'red' }; params = shinyjs.getParams(params, defaultParams); $('.shiny-text-output#' + params.id).css('color', params.color); }" setColor <- function(id, val) { if(is.numeric(as.numeric(val)) & !is.na(as.numeric(val))) { cols <- c("green", "orange", "red") col <- cols[cut(val, breaks=c(-Inf,3.5, 6.5, Inf))] js$setCol(id, col) } } shinyApp( ui = fluidPage( useShinyjs(), ## Set up shinyjs extendShinyjs(text = jsCode), numericInput("n", "Enter a number", 1, 1, 10, 1), "The number is: ", textOutput("n", inline=TRUE), br(), "Twice the number is: ", textOutput("n2", inline=TRUE) ), server = function(input, output) { output$n <- renderText(input$n) output$n2 <- renderText(2 * input$n) observeEvent(input$n, setColor(id = "n", val = input$n)) observeEvent(input$n, setColor(id = "n2", val = 2 * input$n)) }) 中的语法错误:在定义列colModel的项之后没有逗号。下一个问题:输入数据应包含dealDateidparentlevelisLeaf,但您不应在{{1}中定义任何列用名字。最后一个重要问题:您需要包含isLeaf和可选colModel才能使网格成为TreeGrid。

结果代码可能是

treeGrid: true, treeGridModel: "adjacency", ExpandColumn: "dealName"

我在其中包括双击启动内联编辑。生成的演示可以找到here。它使用我今天发布的免费jqGrid 4.10.0。该代码已在CDN上提供(请参阅the wiki article)。