2015-03-02 15 views
0

這是我目前的列模型:具有行特定下拉列表的JqGrid?

colModel: [ 
        { name: 'LastName', index: 'LastName', width: 120, align: 'center' }, 
        { name: 'FirstName', index: 'FirstName', width: 120, align: 'center' }, 
        { name: 'MiddleName', index: 'MiddleName', width: 120, align: 'center' }, 
        { name: 'DOB', index: 'DOB', width: 100, align: 'center' }, 
        { name: 'id', index: 'id', align: 'center', hidden: true }, 
        { name: 'checked', index: 'checked', align: 'center', hidden: true }, 
        { name: 'courtType', index: 'courtType', align: 'center', editable: true, sortable: false, width: 100 }, 
        { name: 'CaseNumber', index: 'CaseNumber', align: 'center', editable: true, sortable: false, width: 100 }, 
        { name: 'CourtFileNumber', index: 'CourtFileNumber', align: 'center', editable: true, sortable: false, width: 100 }, 
        { name: 'WarrantDocket', index: 'WarrantDocket', align: 'center', editable: true, sortable: false, width: 100 }, 
        { name: 'Sentencing', index: 'Sentencing', align: 'center', editable: true, sortable: false, width: 100 }, 
        { name: 'notes', index: 'notes', align: 'center', editable: true, sortable: false, width: 400 }, 

        { name: 'name', index: 'name', width: 200, 
         sortable: true, 
         align: 'center', 
         editable: true, 
         cellEdit: true, 
         edittype: 'select', 
         formatter: 'select', 
         editoptions: { value: getAllSelectOptions() } 
        } 
        ], 

這讓我從getAllSelectOptions下拉列表()。

function getAllSelectOptions() { 

    var states = { '1': 'Alabama', '2': 'California', '3': 'Florida', 
     '4': 'Hawaii', '5': 'London', '6': 'Oxford' 
    }; 
    return states; 
} 

有沒有辦法根據每個行的ID和webmethod調用(或其他方式)獲取不同的列表?

var createCourtGridURL = AdminPath + "WebMethods/Kernel/Court.asmx/GetGetdData"; 

var jqGridDataURL = AdminPath + "WebMethods/Kernel/Court.asmx/GetSelectData"; 

編輯:工作守則

var myGrid = $('#selectedInmateList'), 
     decodeErrorMessage = function (jqXHR, textStatus, errorThrown) { 
      var html, errorInfo, i, errorText = textStatus + '\n' + errorThrown; 
      if (jqXHR.responseText.charAt(0) === '[') { 
       try { 
        errorInfo = $.parseJSON(jqXHR.responseText); 
        errorText = ""; 
        for (i = 0; i < errorInfo.length; i++) { 
         if (errorText.length !== 0) { 
          errorText += "<hr/>"; 
         } 
         errorText += errorInfo[i].ExceptionType + ": " + errorInfo[i].Message; 
        } 
       } 
       catch (e) { } 
      } else { 
       html = /<body.*?>([\s\S]*)<\/body>/i.exec(jqXHR.responseText); 
       if (html !== null && html.length > 1) { 
        errorText = html[1]; 
       } else { 
        errorText = jqXHR.responseText.replace(/\n/, "<br>"); 
       } 
      } 
      return errorText; 
     }, 
     buildSelectFromJson = function (data) { 
      var html = '<select>', d = data.d, length = d.length, i = 0, item; 
      for (; i < length; i++) { 
       item = d[i]; 
       html += '<option value=' + item + '>' + item + '</option>'; 
      } 
      html += '</select>'; 
      return html; 
     }; 

     myGrid.jqGrid({ 
      url: createCourtGridURL, 
      datatype: 'json', 
      ajaxGridOptions: { contentType: "application/json" }, 
      ajaxSelectOptions: { contentType: "application/json", dataType: 'json'/*, type: "POST"*/ }, 
      serializeGridData: function (postData) { 
       if (postData.filters === undefined) postData.filters = null; 
       return JSON.stringify(postData); 
      }, 
      mtype: 'POST', 
      colNames: ['Id', 'Last Name', 'First Name', 'Middle Name', 'DOB', 'Checked', 'User'], 
      colModel: [ 
      { name: 'id', index: 'id', align: 'center', hidden: true }, 
      { name: 'LastName', index: 'LastName', width: 120, align: 'center' }, 
      { name: 'FirstName', index: 'FirstName', width: 120, align: 'center' }, 
      { name: 'MiddleName', index: 'MiddleName', width: 120, align: 'center' }, 
      { name: 'DOB', index: 'DOB', width: 100, align: 'center' }, 
      { name: 'checked', index: 'checked', align: 'center', hidden: true }, 
      { name: 'User', index: 'User', width: 400, editable: true, 
       stype: 'select', edittype: 'select', 
       /* 
       searchoptions: { 
       sopt: ['cn', 'nc', 'bw', 'bn', 'eq', 'ne', 'ew', 'en', 'lt', 'le', 'gt', 'ge'], 
       dataUrl: jqGridDataURL, 
       buildSelect: buildSelectFromJson 
       }, 
       */ 
       editoptions: { 
        sopt: ['cn', 'nc', 'bw', 'bn', 'eq', 'ne', 'ew', 'en', 'lt', 'le', 'gt', 'ge'], 

        dataUrl: function() { 
         var rowID = selectedRowId = myGrid.jqGrid('getGridParam', 'selrow'); 
         return jqGridDataURL + '?id=' + rowID; 
        }, 

        buildSelect: buildSelectFromJson, 
        dataEvents: [ 
         { 
          type: 'change', 
          fn: function (e) { 
           //alert('change event') 
          } 
         } 
        ] 
       } 
      } 
     ], 
      pager: '#pager', 
      rowNum: 10, 
      rowList: [5, 10, 20, 50], 
      sortname: 'Id', 
      sortorder: 'desc', 
      rownumbers: true, 
      viewrecords: true, 
      height: '100%', 
      cellEdit: true, 
      multiselect: true, 
      cellsubmit: 'clientArray', //? 
      pager: '#selectedInmatePager', 
      gridview: true, 
      jsonReader: { 
       root: "d.rows", 
       page: "d.page", 
       total: "d.total", 
       records: "d.records", 
       cell: "" 
      }, 
      caption: 'Selected Court Inmates', 
      loadError: function (jqXHR, textStatus, errorThrown) { 
       // remove error div if exist 
       $('#' + this.id + '_err').remove(); 
       // insert div with the error description before the grid 
       myGrid.closest('div.ui-jqgrid').before(
       '<div id="' + this.id + '_err" style="max-width:' + this.style.width + 
       ';"><div class="ui-state-error ui-corner-all" style="padding:0.7em;float:left;"><span class="ui-icon ui-icon-alert" style="float:left; margin-right: .3em;"></span><span style="clear:left">' + 
       decodeErrorMessage(jqXHR, textStatus, errorThrown) + '</span></div><div style="clear:left"/></div>'); 
      }, 
      loadComplete: function() { 
       // remove error div if exist 
       $('#' + this.id + '_err').remove(); 
      } 
     }); 
    myGrid.jqGrid('navGrid', '#selectedInmatePager', { add: false, edit: true, del: false }, 
        {}, {}, {}, { multipleSearch: true, overlay: false, width: 480 }); 
+0

對不起,但尚不清楚你到底想要什麼。哪個'datatype'有網格?如果您使用遠程數據類型('「json」或'「xml」'),那麼知道您是否使用'loadonce:true'選項很重要。你使用'formatter:'select''。所以輸入數據應該包含像你的例子中的'1','2',...''6'這樣的id。是這樣嗎?你是否需要允許在每行的編輯過程中允許每行允許*不同的**列表?您使用哪種編輯模式? – Oleg 2015-03-02 17:39:23

+0

@Oleg每行需要有一個行特定的下拉菜單。所以當我點擊行時,我需要點擊一個接收rowID的webmethod,並以某種方式構建此DropDown並將其返回。我發佈了我的jqGrid代碼。 – 0x4f3759df 2015-03-02 17:46:13

回答

1

您使用dataUrl了。 jqGrid支持從4.5.3開始的dataUrl。因此,您可以將dataUrl定義爲回調函數,它將獲取樹形參數rowid,value,columnName。因此,您可以從dataUrl返回包含rowid作爲參數的URL。如果對dataUrl的呼叫對於不同的行將有所不同,您可以實施您的要求。

+0

謝謝奧列格。這工作。 – 0x4f3759df 2015-03-02 19:25:53

+0

@帕特里克:不客氣! – Oleg 2015-03-02 19:42:27