JQGrid：從外部表中選擇項目的下拉列表 - DataValueField與DataTextField

Question

假設Items和ItemTypes具有數字主鍵ItemID和ItemTypeID。每個項目分配一個ItemType。

我有一個JQGrid來編輯項目。在編輯模式下如果不，我想看到的ItemType的名稱，而不是ItemTypeID：

 
    TYPE  | TITLE 
    -----------+-------------------- 
    Category A | Item 1 
    Category A | Item 2 
    Category B | Item 3 
    Category B | Item 4 

在編輯模式下，我希望看到顯示的ItemType文本下拉，而是返回ItemTypeID到服務器。

這裏是我迄今（使用的jqGrid的ASP.NET包裝）：

<trirand:jqgrid id="Grid1" runat="server" ... > 
    <columns> 
     <trirand:jqgridcolumn datafield="ItemID" editable="false" visible="false" width="50" primarykey="true" /> 
     <trirand:jqgridcolumn datafield="ItemTypeID" editable="true" edittype="DropDown" editorcontrolid="ItemTypes" /> 
     <trirand:jqgridcolumn datafield="Title" editable="true" sortable="true" /> 
     ... 
    </columns> 
</trirand:jqgrid> 
<asp:sqldatasource runat="server" id="ItemTypesDatasource" connectionstring="<%$ ConnectionStrings:Main %>" selectcommand="Select ItemTypeID,Title from ItemTypes order by Title" /> 
<asp:dropdownlist runat="server" id="ItemTypes" datasourceid="ItemTypesDatasource" datavaluefield="ItemTypeID" datatextfield="Title" /> 

的問題是，當不能在編輯模式下，它顯示的數字ItemTypeID，而不是文本標籤：

 
    TYPE  | TITLE 
    -----------+-------------------- 
    10| Item 1 
    10| Item 2 
    100124  | Item 3 
    100124  | Item 4 

有什麼辦法讓JQGrid尊重DataValueField和DataTextField之間的區別嗎？ （使用jQuery API或ASP.NET插件。）

Answer 1

：http://www.trirand.net/forum/default.aspx?g=posts&t=168

的想法是處理對電網的CellBinding事件，並查找對應的單元格中包含的ID文本。

protected void JQGrid1_CellBinding(object sender, Trirand.Web.UI.WebControls.JQGridCellBindEventArgs e) 
    { 
     if (e.ColumnIndex == 1) // index of your dropdown column 
     { 
     e.CellHtml = LookupText(e.CellHtml); 
     } 
    } 

LookupText的實施將取決於您的情況;您可以查看列的EditValues（例如1:One;2:Two;3:Three），或者您可以查看數據。

我已經將所有這些邏輯包裝到一個自定義列類（在VB.NET中），該自定義列類也基於您提供的SQL命令填充下拉列表。

Public Class JqGridDropDownColumn 
    Inherits Trirand.Web.UI.WebControls.JQGridColumn 

    Private _SelectCommand As String 
    '' /* The SQL command used to populate the dropdown. */ 
    '' /* We assume that the first column returned contains the value (e.g. BudgetID) and the second column contains the text (e.g. Title). */ 
    Public Property SelectCommand() As String 
     Get 
      Return _SelectCommand 
     End Get 
     Set(ByVal value As String) 
      _SelectCommand = value 
     End Set 
    End Property 

    Private _DropDownNullText As String 
    Public Property DropDownNullText() As String 
     Get 
      Return _DropDownNullText 
     End Get 
     Set(ByVal value As String) 
      _DropDownNullText = value 
     End Set 
    End Property 

    Private WithEvents Grid As JQGrid 
    Private DropDownValues As DataTable 

    Sub Init(g) 
     Grid = g 
     DropDownValues = ExecuteDataset(cs, CommandType.Text, Me.SelectCommand).Tables(0) 
     DropDownValues.PrimaryKey = New DataColumn() {DropDownValues.Columns(0)} 
     Me.EditValues = BuildEditValues(DropDownValues) 
    End Sub 

    '' /* Builds a string of the form "1:One;2:Two;3:Three" for use by the EditValues property. */ 
    '' /* This assumes that Table consists of two columns corresponding to the Value (e.g. BudgetID) and Text (e.g. Title), in that order. */ 
    Protected Function BuildEditValues(ByVal Table As DataTable) As String 
     Dim Result As String = "" 
     If Not String.IsNullOrEmpty(Me.DropDownNullText) Then 
      Result = String.Format(":{0}", Me.DropDownNullText) 
     End If 
     For Each Row As DataRow In Table.Rows 
      If Len(Result) > 0 Then Result &= ";" 
      Result &= Row(0) & ":" & Row(1) 
     Next 
     Return Result 
    End Function 


    Private Sub Grid_CellBinding(ByVal sender As Object, ByVal e As Trirand.Web.UI.WebControls.JQGridCellBindEventArgs) Handles Grid.CellBinding 
     '' /* Display the text (e.g. Title) rather than the value (e.g. BudgetID) */ 
     If Grid.Columns(e.ColumnIndex) Is Me Then 
      e.CellHtml = LookupText(e.CellHtml) 
     End If 
    End Sub 

    Private Function LookupText(ByVal Value As String) As String 
     Dim MatchingRow As DataRow = DropDownValues.Rows.Find(Value) 
     If MatchingRow IsNot Nothing Then 
      Return MatchingRow(1) '' /* Column 1 is assumed to contain the text */ 
     Else 
      Return "" 
     End If 
    End Function 
End Class 

你只需要調用DropdownColumn.Init(MyGrid)從電網的init事件此列。希望這可以幫助某人。

Answer 2

香草，問題在於您正在使用datafield =「ItemTypeID」。您必須將其更改爲類似CategoryTitle的內容。

這裏還發現了一個很好的解決方案在這裏的例子http://www.trirand.net/examples/editing_data/edit_types/default.aspx

Answer 3

對於那些誰使用javascrpt，而不是asp.net包裝時，JavaScript方法是使用格式化器和unformatter：

列模型：

editoptions：{值：「1：類型1; 2：2型3：類型3; 4：第4類; 5：成的Type5' }， 格式：showTextFmatter，格式化：unformatShowText，

我的格式，你應該寫自己喜歡如下：

function showTextFmatter (cellvalue, options, rowObject) 
    { 
     var vts={}; 
     if(options.colModel.editoptions.values==undefined) 
     { 
      vtStr = options.colModel.editoptions.value.split(';'); 
      for(var i =0;i<vtStr.length;i++) 
      { 
       kv = vtStr[i].split(':'); 
       vts[kv[0]]=vtStr[i]; 
      } 
      options.colModel.editoptions.values = vts; 
     } 
     return options.colModel.editoptions.values[cellvalue]; 
    } 
    function unformatShowText (cellvalue, options) 
    { 
     return cellvalue.split(':')[0]; 
    }