2014-12-03 44 views
-1
<script type="text/javascript"> 

$(document).ready(function() { 

    $("#list1").jqGrid({ 
     datatype: "local", 
     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" }, 
         { name: 'name', index: 'name', width: 100 }, 
         { name: 'amount', index: 'amount', width: 80, align: "right", sorttype: "float" }, 
         { name: 'tax', index: 'tax', width: 80, align: "right", sorttype: "float" }, 
         { name: 'total', index: 'total', width: 80, align: "right", sorttype: "float" }, 
         { name: 'note', index: 'note', width: 150, sortable: false } 
     ], 
     multiselect: true, 
     rowNum: 10, 
     rowList: [5, 10, 20, 50, 100], 
     pager: $('#pager1'), 
     sortorder: "desc", 
     viewrecords: true, 
     subGrid: true, 
     subGridUrl: 'Default.aspx', 
     subGridModel: [{ 
      name: ['No', 'Item', 'Qty', 'Unit', 'Line otal'], 
      width: [55, 200, 80, 80, 80] 
     } 
     ], 
     caption: "Manipulating Array Data" 
    }); 
    $("#list1").jqGrid('navGrid', '#pager1', { del: false, add: false, edit: false }, {}, {}, {}, { multipleSearch: true }); 
    var mydata = [ 
       { id: "1", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" }, 
       { id: "2", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" }, 
       { id: "3", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }, 
       { id: "4", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" }, 
       { id: "5", invdate: "2007-10-05", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" }, 
       { id: "6", invdate: "2007-09-06", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }, 
       { id: "7", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" }, 
       { id: "8", invdate: "2007-10-03", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" }, 
       { id: "9", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" } 
    ]; 
    for (var i = 0; i <= mydata.length; i++) 
     $("#list1").jqGrid('addRowData', i + 1, mydata[i]); 
    var lastsel2 
    $("#rowed5").jqGrid({ 
     datatype: "local", 
     height: 250, 
     colNames: ['ID Number', 'Name', 'Stock', 'Ship via', 'Notes'], 
     colModel: [ 
       { name: 'id', index: 'id', width: 90, sorttype: "int", editable: true }, 
       { name: 'name', index: 'name', width: 150, editable: true, editoptions: { size: "20", maxlength: "30" } }, 
       { name: 'stock', index: 'stock', width: 60, editable: true, edittype: "checkbox", editoptions: { value: "Yes:No" } }, 
       { name: 'ship', index: 'ship', width: 90, editable: true, edittype: "select", editoptions: { value: "FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX" } }, 
       { name: 'note', index: 'note', width: 200, sortable: false, editable: true, edittype: "textarea", editoptions: { rows: "2", cols: "10" } } 
     ], 
     multiselect: true, 
     rowNum: 10, 
     rowList: [5, 10, 20, 50, 100], 
     pager: $('#pager2'), 
     sortorder: "asc", 
     viewrecords: true, 
     onSelectRow: function (id) { 
      if (id && id !== lastsel2) { 
       $('#rowed5').jqGrid('restoreRow', lastsel2); 
       $('#rowed5').jqGrid('editRow', id, true); 
       lastsel2 = id; 
      } 
     }, 
     editurl: "server.php", 
     caption: "Input Types" 
    }); 
    $("#rowed5").jqGrid('navGrid', '#pager2', { del: false, add: false, edit: false }, {}, {}, {}, { multipleSearch: true }); 
    var mydata2 = [ 
       { id: "12345", name: "Desktop Computer", note: "note", stock: "Yes", ship: "FedEx" }, 
       { id: "23456", name: "Laptop", note: "Long text ", stock: "Yes", ship: "InTime" }, 
       { id: "34567", name: "LCD Monitor", note: "note3", stock: "Yes", ship: "TNT" }, 
       { id: "45678", name: "Speakers", note: "note", stock: "No", ship: "ARAMEX" }, 
       { id: "56789", name: "Laser Printer", note: "note2", stock: "Yes", ship: "FedEx" }, 
       { id: "67890", name: "Play Station", note: "note3", stock: "No", ship: "FedEx" }, 
       { id: "76543", name: "Mobile Telephone", note: "note", stock: "Yes", ship: "ARAMEX" }, 
       { id: "87654", name: "Server", note: "note2", stock: "Yes", ship: "TNT" }, 
       { id: "98765", name: "Matrix Printer", note: "note3", stock: "No", ship: "FedEx" } 
    ]; 
    for (var i = 0; i < mydata2.length; i++) 
     $("#rowed5").jqGrid('addRowData', mydata2[i].id, mydata2[i]); 
}); 
</script> 
+0

確保您的頁面中包含了所需的jquery文件... – 2014-12-03 04:27:46

回答

0

請確保您已包含在你頁面這些文件: -

<script src="~/Scripts/jquery-1.11.0.min.js"></script> 
<script src="~/Scripts/jquery.jqGrid.min.js"></script> 

確保Jquery的版本,你是使用應該與jqGrid版本兼容,並且這些文件的放置順序應與上面所示的相同,首先包括jquery文件,然後包含jqGrid文件。

相關問題