獲取jqGrid使用MVC所需的最小文件是什麼？

Question

我下載了jqGrid的文件，但我不太清楚需要引用哪些文件。到目前爲止，我有這些文件：

<link href='@Url.Content("~/Content/themes/base/jquery-ui.css")' ... /> 
<link href='@Url.Content("~/Content/themes/redmond/jquery-ui-1.8.custom.css")' ... /> 
<link href='@Url.Content("~/Content/themes/redmond/ui.jqgrid.css")' ... /> 
<link href='@Url.Content("~/Scripts/jquery.jqGrid-4.3.1/css/ui.jqgrid.css")' ... />    

<script src='@Url.Content("~/Scripts/jquery-1.7.1.min.js")' ...></script> 
<script src='@Url.Content("~/Scripts/jquery-ui-1.8.16.min.js")' ...></script> 

<script src='@Url.Content("~/Scripts/jquery.jqGrid-4.3.1/js/i18n/grid.locale-en.js")' ...></script> 
<script src='@Url.Content("~/Scripts/jquery.jqGrid-4.3.1/js/jquery.jqGrid.min.js")' ...></script>  

我看到另一個例子，表明這些是除了jQuery所需的文件。有人可以確認這是所需要的，並以正確的順序或建議如果我需要添加更多。例如，我是否需要鏈接到區域設置文件？

我剛開始學習jqGrid。我環顧四周，還沒有找到一個很好的例子來說明如何在MVC3和Razor中使用它。有沒有人有鏈接引用，他們發現非常有用。只需要一個很好的鏈接，但我發現與谷歌的大多數鏈接都是舊的，而不是使用Razor。

Answer 1

需要包含的CSS和JavaScript文件的最小列表可以在the jqGrid documentation中找到。你的情況，這將是

<link href='@Url.Content("~/Content/themes/redmond/jquery-ui-1.8.custom.css")' rel='stylesheet' type='text/css' /> 
<link href='@Url.Content("~/Scripts/jquery.jqGrid-4.3.1/css/ui.jqgrid.css")' rel='stylesheet' type='text/css' /> 

<script src='@Url.Content("~/Scripts/jquery-1.7.1.min.js")' type='text/javascript'></script> 
<script src='@Url.Content("~/Scripts/jquery.jqGrid-4.3.1/js/i18n/grid.locale-en.js")' type='text/javascript'></script> 
<script src='@Url.Content("~/Scripts/jquery.jqGrid-4.3.1/js/jquery.jqGrid.min.js")' type='text/javascript'></script> 

Answer 2

我會認爲這是一個典型的例子 - 一個代碼片段表示 一個簡單，可運行 - jqGrid的與最少的編碼，但仍然足夠強大，以顯示（根據this documentation）的最重要的特徵：

// see: https://free-jqgrid.github.io/getting-started/ 
 
// CDN used: https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid 
 
$(function() { 
 
    $("#grid").jqGrid({ 
 
    autowidth: true, height: 45, 
 
    colNames: ['First name', 'Last name', 'Updated?'], 
 
    colModel: [{name: "firstName"}, {name: "lastName"}, {name: "updated"}], 
 
    data: [ 
 
     { id: 10, firstName: "Jane", lastName: "Doe", updated: "no"}, 
 
     { id: 20, firstName: "Justin", lastName: "Time", updated: "no" } 
 
    ], 
 
    loadComplete: function() { 
 
     
 
    // demo - how to access grid data 
 
    var ids = $(this).jqGrid('getDataIDs'); // ids for each row 
 
    var gridData = $(this).jqGrid('getGridParam', 'data'); // all rows 
 
    var gridLen = gridData.length; // number of rows 
 
     
 
    // now get a list from the data 
 
    var nameList = []; 
 
    for(var i=0; i<gridLen; i++) { 
 
     nameList.push(gridData[i].firstName+' [id:'+ ids[i] +']'); 
 
    } 
 
    var strList = nameList.join(", "); 
 
    $("#nameList").html(strList); 
 

 
    var rowKey = ids[1]; // rowKey for the operations below 
 

 
    // get data from the 2nd row 
 
    var secondRow=$(this).jqGrid('getRowData', rowKey); 
 
    $("#getRowData").html(secondRow.firstName + ', ' + secondRow.lastName 
 
     + ', updated:' + secondRow.updated); 
 
      
 
    // set update flag by modifying row data 
 
    secondRow.updated = "yes"; 
 
    $(this).jqGrid('setRowData', rowKey, secondRow); 
 
     
 
    // update single cell (read, modify, write) 
 
    var lastName=$(this).jqGrid('getCell', rowKey, "lastName"); 
 
    lastName=lastName.toUpperCase(); 
 
    // first change the cell in the visible part of grid 
 
    $(this).jqGrid('setCell', rowKey, "lastName", lastName); 
 
    // now change the internal local data 
 
    $(this).jqGrid('getLocalRow', rowKey).lastName = lastName; 
 
     
 
    // make column label of "Updated?" column larger 
 
    $(this).jqGrid('setLabel', 2, '<h3>Updated?</h3>'); 
 
     
 
    // --- now verify the changes --- 
 
    gridData = $(this).jqGrid('getGridParam', 'data'); // get rows again 
 
    var rowList = []; 
 
    for(var i=0; i<gridLen; i++) { 
 
     rowList.push(gridData[i].firstName + ', ' + gridData[i].lastName 
 
      + ', updated:' + gridData[i].updated); 
 
    } 
 
    $("#showGridData").html(rowList.join("; ")); 
 
     
 
    } 
 
    }); 
 
});

<meta charset="utf-8"/> 
 
<meta http-equiv="X-UA-Compatible" content="IE=edge"/> 
 
<title>Canonical jqGrid example</title> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css"/> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.2/css/ui.jqgrid.min.css"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.2/jquery.jqgrid.min.js"></script> 
 

 
<table id="grid"></table> 
 
<br/><b>First names list:</b><div id="nameList"></div> 
 
<br/><b>Get data from row#1 (before update):</b><div id="getRowData"></div> 
 
<br/><b>Verify changes (after update):</b><div id="showGridData"></div>

您可以將它與Oleg的答案一起用作您自己的MVC應用程序開發的工作起點（在這種情況下，使用@Url.Content語法，如上面的答案） - 最後但並非最不重要的一個代碼片段：爲與jqGrid相關的進一步StackOverflow問題提供模板。

我已經添加了一些代碼來顯示如何訪問內部網格數據。它解決了諸如「我如何從特定行訪問數據？」等問題。
但是，如果您不需要代碼段中的代碼，則可以刪除整個loadComplete部分，但網格演示仍然可以工作。

如果您需要分頁在你的代碼片段，看到this answer.

注：我花了很多時間與jqQuery鍵以及它們如何工作的（唯一解決行需要）。下面是我的經驗，概括地說一些信息：

• 如果沒有明確的colModel指定一個鍵，然後jqGrid的假設"id"爲關鍵領域。這是這個例子做什麼：數據填充id字段，這是作爲一個關鍵

• 否則，如果需要一個不同的密鑰，請在colModel{name: "myKey", hidden:true, key:true}，並"myKey"在（如果你忘記了，你會得到一個計數不匹配的錯誤）。然後您可以在數據中填入"myKey"。 出現次序很重要！在這種情況下，沒有"id"而是"myKey"字段。關鍵字段不需要隱藏。如果省略隱藏屬性（或將值設爲false），則該鍵在網格中顯示爲列。
  請注意，在這種密鑰重新映射的情況下，jqGrid內部使用_id_作爲屬性來存儲密鑰。你可以看到，如果你使用函數.jqGrid('getGridParam', 'data')，那麼每一行都包含這樣一個屬性。

• 指定key: true多次是無用，因爲只有與該屬性的最後場被視爲密鑰（即最右邊的鍵列）。話雖如此，你不能用這種方式指定複合鍵！如果你需要一個複合鍵，那麼你必須將這些鍵連接成一個單一的鍵字段。

• 如果沒有指定你自己的關鍵，也不填充id字段，然後的jqGrid創建自己的價值觀，並將它們分配到每一行的id場。它們通常被命名爲"jqg1"（對於第一行），"jqg2"（對於第二行）等等。

• 該示例還顯示瞭如何更新一行。有關更多詳細信息，請參閱here和there。請注意，如果您以這種方式更新數據，它只會在客戶端（在您的瀏覽器中）更新。如果要使更改永久化，則必須保存該值（即，通過AJAX將更新的數據發送到服務器，並提供SAVE按鈕等），否則在重新加載時將其丟棄。

• 列標題（即被顯示給用戶的標題）由colNames屬性定義，不與colModel內的name屬性混淆。 colModel中的name屬性定義了字段名稱，這對數據綁定很重要。在colNames和colModel中的出現順序都很重要，因爲它們彼此相關（例如，'Last Name',colNames出現在第二位置，colModel內部的相應字段出現在位置2）。
  如果您希望稍後在代碼中更改列標題（即，定義）後，看看這裏：How to update column titles dynamically.

---

^{有用的鏈接：jqGrid free edition - getting started}