jqGrid組頭問題

Question

我是jqGrid的新手，我想以動態方式生成組頭，但它確實有效，getValues（'department'）語句分析用戶輸入的部門，例如'a，b， c代碼如下：

function search() { 
     var startDate = $('#startDate').val(); 
     var endDate = $('#endDate').val(); 
     var department = getValues('department'); 

     var colName = new Array(); 
     var colAttr = new Array(); 
     colName[0] = "日期"; 
     colAttr[0] = "{name:'" + colName[0] + "',sortable:false,align:'center'}" 

     var length = getLength(department); 
     for (var i = 1; i < length + 1; i++) { 
      colName[2 * i - 1] = "諮詢" + i; 
      colName[2 * i] = "投訴" + i; 
      colAttr[2 * i - 1] = "{name:'" + colName[2 * i - 1] + "'index:'" + i + "',sortable:false,align:'center'}"; 
      colAttr[2 * i] = "{name:'" + colName[2 * i] + "',sortable:false,align:'center'}"; 
     } 
     var header = mySplitter(department); 

     var urlStr = '<%=jspName%>?startDate=' + startDate + '&endDate=' + endDate + '&action=query&department=' + department; 
     urlStr = encodeURI(urlStr); 
     jQuery("#dataGrid").clearGridData(); 
     jQuery("#dataGrid").GridUnload(); 
     jQuery("#dataGrid").jqGrid({ 
      url: urlStr, 
      datatype: "json", 
      colNames: colName, 
      colModel: colAttr, 
      height: 450, 
      rowNum: 20000,     //默認每頁記錄數 
      rowList: [10, 20, 30],   //可選擇的每頁記錄數 
      pager: '#dataPager', 
      shrinkToFit: true, 
      hidegrid: false, 
      emptyrecords: "暫無數據", 
      viewrecords: true, 
      loadonce: true, //自動翻頁 
      caption: "<%=title%>" 
     }); 
     jQuery("#dataGrid").jqGrid('navGrid', '#dataPager', {edit: false, add: false, del: false, autowidth: true}); 
     $("#dataGrid").setGridWidth($(window).width() * 0.90); 
     jQuery("#dataGrid").jqGrid('setGroupHeaders', { 
      useColSpanStyle: true, 
      groupHeaders: header 
     }); 
    } 

function mySplitter(str) { 
     if (str === null) { 
      return null; 
     } 
     var temp; 
     temp = str.split(","); 
     var result = new Array(); 
     for (var i = 0; i < temp.length - 1; i++) { 
      result[i] = "{startColumnName: '" + (i + 1) + "', numberOfColumns: 2, titleText: '" + temp[i] + "'}"; 
     } 
     return result; 
    } 

    function getLength(str) { 
     if (str === null) { 
      return 0; 
     } 
     var temp = str.split(","); 
     return temp.length - 1; 

    } 

代碼沒有生成組頭。有人可以幫助我嗎？ colModel陣列的

Answer 1

元件必須具有屬性name等相反，您設置串爲colAttr元素的對象。如果需要追加新項目陣列，最好使用push方法

var colName = ["日期"], 
    colAttr = [{name: colName[0], sortable:false, align: 'center'}], 
    i; 

：

在JavaScript中，你不應該使用new Array()，而不是你應該使用[]。

另外，你應該

• 所有colModel項刪除index財產。您使用loadonce: true。因此，您可以在刪除index屬性後使用本地排序。
• 如果您需要爲所有列定義一些屬性，則應該從colModel項目（刪除sortable:false,align:'center'）中刪除重複項，並將jqGrid選項cmTemplate與設置一起添加。例如，您可以使用cmTemplate: { sortable: false, align: "center" }。
• 我建議您添加gridview: true和autoencode: true選項。此外，您應該考慮使用height: "auto"而不是height: 450。
• 我建議您使用postData作爲屬性，而不是手動構建urlStr（有關詳細信息，請參閱the answer）。在這種情況下，選項可能是

url: '<%=jspName%>', 
postData: { 
    startDate: function() { return $("#startDate").val(); }, 
    endDate: function() { return $("#endDate").val(); }, 
    action: "query", 
    department: function() { return getValues('department'); } 
}