如何實現自定義的jqGrid中的分組

Question

我在jqGrid的首發，我寫這篇文章的代碼實現分組

$(function() { 
      var mydata = [ 
          { id: "11", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" }, 
          { id: "12", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" }, 
          { id: "13", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }, 
          { id: "14", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" }, 
          { id: "15", invdate: "2007-10-05", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" }, 
          { id: "16", invdate: "2007-09-06", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }, 
          { id: "17", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" }, 
          { id: "18", invdate: "2007-10-03", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" }, 
          { id: "19", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }, 
          { id: "21", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" }, 
          { id: "22", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" }, 
          { id: "23", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }, 
          { id: "24", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" }, 
          { id: "25", invdate: "2007-10-05", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" }, 
          { id: "26", invdate: "2007-09-06", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }, 
          { id: "27", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" }, 
          { id: "28", invdate: "2007-10-03", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" }, 
          { id: "29", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00"}]; 
      jQuery("#list48").jqGrid({ 
       data: mydata, 
       datatype: "local", 
       height: 'auto', 
       rowNum: 30, 
       rowList: [10, 20, 30], 
       colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'], 
       colModel: [ 
        { name: 'id', index: 'id', width: 60, sorttype: "int" }, 
        { name: 'invdate', index: 'invdate', width: 90, sorttype: "date", formatter: "date" }, 
        { name: 'name', index: 'name', width: 100, editable: true }, 
        { name: 'amount', index: 'amount', width: 80, align: "right", sorttype: "float", formatter: "number", editable: true }, 
        { name: 'tax', index: 'tax', width: 80, align: "right", sorttype: "float", editable: true }, 
        { name: 'total', index: 'total', width: 80, align: "right", sorttype: "float" }, 
        { name: 'note', index: 'note', width: 150, sortable: false}], 
       pager: "#plist48", 
       viewrecords: true, 
       sortname: 'name', 
       grouping: true, 
       groupingView: { groupField: ['name'] }, 
       caption: "Grouping Array Data" }); 

     }); 

，並創建該網格

我想設置分組Dynamicaly.Such用戶該網格GROP這樣這幅畫 後拖動標題列和下降機頂盒請幫我實現這個senaryo 。感謝所有

Answer 1

在你需要使用groupingRemove和groupingGroupBy方法來改變分組的動態的jqGrid的一面，你可以在documentation閱讀更多關於他們。

對於你應該看看以下交互的UI部分：

• Draggable
• Droppable
• Sortable

在投擲的的購物車樣本應該給你一個非常好的概述如何a探討這個問題。

現在所有的理論信息後，我建立了一個的jsfiddle樣品你：jqGrid dynamic drag-n-drop grouping。它需要一些樣式才能看起來像你正在尋找的，但它應該讓你瞭解所有的內部。如果您需要對代碼進行一些評論，請告訴我 - 我可以稍後添加它們。