Режим редактирования JQGrid: как заполнить список выбора на основе выбора в другом списке выбора

Question

У меня есть jqGrid, что, когда я перехожу в режим редактирования, мне нужно иметь 2 списка выбора. Мне нужен второй список для фильтрации, основанный на выборе из списка выбора 1.

Это моя первая попытка работать с jqGrid, поэтому у меня возникают проблемы с вещами.

Я видел несколько примеров, в которых используются жестко закодированные массивы и т. Д., Но мне нужно извлечь информацию из базы данных, и у меня возникли проблемы с ее работой.

Думаю, мне нужно, чтобы моя рука прошла через этот. :-p

Мои столбцы, о которых идет речь, это AssemblyTypeName и AssemblyName, я должен заполнить их в этом порядке.

Мой jqGrid код ниже:

$("#jqTable").jqGrid({ 
     // Ajax related configurations 
     url: '@Url.Action("_CustomBinding")', 
     datatype: "json", 
     mtype: "POST", 
     postData: { 
      programID: function() { return $("#ProgramID option:selected").val(); }, 
      buildID: function() { return $('#Builds option:selected').val(); } 
     }, 
     // Specify the column names 
     colNames: ["Actions", "Assembly ID", "Assembly Type", "Assembly Name", "Cost", "Order", "Budget Report", "Partner Request", "Display"], 

     // Configure the columns 
     colModel: [ 
     { name: 'myac', width: 80, fixed: true, sortable: false, resize: false, formatter: 'actions', formatoptions: { keys: true} }, 
     { name: "AssemblyID", key: true, index: "AssemblyID", width: 40, align: "left", editable: false }, 
     { name: "AssemblyTypeName", index: "AssemblyTypeName", width: 100, align: "left", editable: true, edittype: 'select', 
      editoptions: { 
       dataUrl: '@Url.Action("_AssemblyTypes")', 
       buildSelect: function (data) { 
        var response = jQuery.parseJSON(data); 
        var s = '<select>'; 
        if (response && response.length) { 
         for (var i = 0, l = response.length; i < l; i++) { 
          var ri = response[i]; 
          s += '<option value="' + ri + '">' + ri + '</option>'; 
         } 
        } 
        return s + "</select>"; 
       } 
      } 
     }, 
     { name: "AssemblyName", index: "AssemblyName", width: 100, align: "left", editable: true, edittype: 'select', 
      editoptions: { 
       dataUrl: '@Url.Action("_Assemblies")', 
       buildSelect: function (data) { 
        var response = jQuery.parseJSON(data); 
        var s = '<select>'; 
        if (response && response.length) { 
         for (var i = 0, l = response.length; i < l; i++) { 
          var ri = response[i]; 
          s += '<option value="' + ri + '">' + ri + '</option>'; 
         } 
        } 
        return s + "</select>"; 
       } 
      } 
     }, 
     { name: "AssemblyCost", index: "AssemblyCost", width: 50, align: "left", formatter: "currency", editable: true }, 
     { name: "AssemblyOrder", index: "AssemblyOrder", width: 50, align: "left", editable: true }, 
     { name: "AddToBudgetReport", index: "AddToBudgetReport", width: 100, align: "center", formatter: "checkbox", editable: true, edittype: 'checkbox' }, 
     { name: "AddToPartnerRequest", index: "AddToPartnerRequest", width: 100, align: "center", formatter: "checkbox", editable: true, edittype: 'checkbox' }, 
     { name: "Show", index: "Show", width: 50, align: "center", formatter: "checkbox", editable: true, edittype: 'checkbox'}], 

     // Grid total width and height and formatting 
     //width: 650, 
     //height: 220, 
     altrows: true, 

     // Paging 
     //toppager: true, 
     pager: $("#jqTablePager"), 
     rowNum: 10, 
     rowList: [10, 20, 30], 
     viewrecords: true, // Specify if "total number of records" is displayed 
     emptyrecords: 'No records to display', 

     // Default sorting 
     sortname: "AssemblyID", 
     sortorder: "asc", 

     // Grid caption 
     caption: "Build Template", 

     // grid command functionality 
     editurl: '@Url.Action("_AjaxUpdate")', 
     onSelectRow: function (AssemblyID) { 
      if (AssemblyID && AssemblyID !== lastsel) { 
       $('#jqTable').jqGrid('restoreRow', lastsel); 
       var cm = $("#jqTable").jqGrid('getColProp', 'AssemblyTypeName'); 
       cm.editable = false; 
       $("#jqTable").jqGrid('editRow', AssemblyID, true); 
       cm.editable = true; 
       lastsel = AssemblyID; 
      } 
     } 
    }).navGrid("#jqTablePager", 
     { refresh: false, add: true, edit: false, del: false }, 
      {}, // settings for edit 
      {}, // settings for add 
      {}, // settings for delete 
      {sopt: ["cn"]} // Search options. Some options can be set on column level 
    ); 

Спасибо за помощь и терпение.

Answer 1

// Set up the jquery grid 
    $("#jqTable").jqGrid({ 
     // Ajax related configurations 
     url: '@Url.Action("_CustomBinding")', 
     datatype: "json", 
     mtype: "POST", 
     postData: { 
      programID: function() { return $("#ProgramID option:selected").val(); }, 
      buildID: function() { return $('#Builds option:selected').val(); } 
     }, 
     // Specify the column names 
     colNames: ["Assembly ID", "Assembly Type", "Assembly Name", "Cost", "Order", "Budget Report", "Partner Request", "Display"], 

     // Configure the columns 
     colModel: [ 
     {name: "AssemblyID", key: true, index: "AssemblyID", width: 40, align: "left", editable: false }, 
     { name: "AssemblyTypeName", index: "AssemblyTypeName", width: 100, align: "left", editable: true, edittype: 'select', 
      editoptions: { 
       dataUrl: '@Url.Action("_AssemblyTypes")', 
       buildSelect: function (data) { 
        jqGridAssemblyTypes = jQuery.parseJSON(data); 
        var s = '<select>'; 
        if (jqGridAssemblyTypes && jqGridAssemblyTypes.length) { 
         for (var i = 0, l = jqGridAssemblyTypes.length; i < l; i++) { 
          var ri = jqGridAssemblyTypes[i]; 
          s += '<option value="' + ri + '">' + ri + '</option>'; 
         } 
        } 
        return s + "</select>"; 
       }, 
       dataInit: function (elem) { 
        var AssemblyTypes = $(elem).val(); 
        $("#jqTable").setColProp('AssemblyName', { editOptions: { dataUrl: '@Url.Action("Assemblies", "Build")' + '/' + AssemblyTypes} }); 
       }, 
       dataEvents: [ 
       { 
        type: 'change', 
        fn: function (e) { 
         var AssemblyType = $(e.target).val(); 

         $.ajax({ 
          url: '_JQGridAssemblies', 
          data: { AssemblyTypes: AssemblyType }, 
          dataType: 'json', 
          async: false, 
          success: function (assemblies) { 
           jqGridAssemblies = assemblies; 
          } 
         }); 

         resetAssemblyValues(); 

         // build 'AssemblyName' options based on the selected 'AssemblyType' value 
         var sc = jqGridAssemblies; 
         var newOptions = ''; 
         for (var assemblyName in sc) { 
          if (sc.hasOwnProperty(assemblyName)) { 
           newOptions += '<option role="option" value="' + 
               jqGridAssemblies[assemblyName] + '">' + 
               jqGridAssemblies[assemblyName] + '</option>'; 
          } 
         } 

         // populate the new 
         if ($(e.target).is('.FormElement')) { 
          // form editing 
          var form = $(e.target).closest('form.FormGrid'); 
          $("select#AssemblyName.FormElement", form[0]).html(newOptions); 
         } 

        } 
       } 
      ] 

      } 
     }, 
     { name: "AssemblyName", index: "AssemblyName", width: 100, align: "left", editable: true, edittype: 'select', 
      editoptions: { 
       dataUrl: '@Url.Action("_Assemblies")', 
       buildSelect: function (data) { 
        var response = jQuery.parseJSON(data); 
        var s = '<select>'; 
        if (response && response.length) { 
         for (var i = 0, l = response.length; i < l; i++) { 
          var ri = response[i]; 
          s += '<option value="' + ri + '">' + ri + '</option>'; 
         } 
        } 
        return s + "</select>"; 
       } 
      } 
     }, 
     { name: "AssemblyCost", index: "AssemblyCost", width: 50, align: "left", formatter: "currency", editable: true }, 
     { name: "AssemblyOrder", index: "AssemblyOrder", width: 50, align: "left", editable: true }, 
     { name: "AddToBudgetReport", index: "AddToBudgetReport", width: 100, align: "center", formatter: "checkbox", editable: true, edittype: 'checkbox' }, 
     { name: "AddToPartnerRequest", index: "AddToPartnerRequest", width: 100, align: "center", formatter: "checkbox", editable: true, edittype: 'checkbox' }, 
     { name: "Show", index: "Show", width: 50, align: "center", formatter: "checkbox", editable: true, edittype: 'checkbox'}], 

     // Grid total width and height and formatting 
     //width: 650, 
     //height: 220, 
     altrows: true, 

     // Paging 
     //toppager: true, 
     pager: $("#jqTablePager"), 
     rowNum: 10, 
     rowList: [10, 20, 50, 100], 
     viewrecords: true, // Specify if "total number of records" is displayed 
     emptyrecords: 'No records to display', 

     // Default sorting 
     sortname: "AssemblyID", 
     sortorder: "asc", 

     // Grid caption 
     caption: "Build Template", 

     // grid command functionality 
     editurl: '@Url.Action("_AjaxUpdate")' 
    }).navGrid("#jqTablePager", 
     { refresh: false, add: true, edit: true, del: true }, 
      { 
       url: '@Url.Action("_AjaxUpdate")', 
       editData: { 
        extraParam: function (params, postdata) { 
         programID = $("#ProgramID option:selected").val(); 
         buildID = $('#Builds option:selected').val(); 
         startDate = $('#DateBegin').val(); 
         endDate = $('#DateEnd').val(); 
         return programID + '|' + buildID + '|' + startDate + '|' + endDate; 
        }, 
        reloadAfterSubmit: true, 
        closeAfterEdit: true 
       } 
      }, // settings for edit 
      { 
       url: '@Url.Action("_AjaxUpdate")', 
       addData: { 
        extraParam: function (params, postdata) { 
         programID = $("#ProgramID option:selected").val(); 
         buildID = $('#Builds option:selected').val(); 
         startDate = $('#DateBegin').val(); 
         endDate = $('#DateEnd').val(); 
         return programID + '|' + buildID + '|' + startDate + '|' + endDate; 
        }, 
        reloadAfterSubmit: true, 
        closeAfterAdd: true 
       } 
      }, // settings for add 
      { 
       url: '@Url.Action("_AjaxUpdate")', 
       delData: { 
        extraParam: function (params, postdata) { 
         programID = $("#ProgramID option:selected").val(); 
         buildID = $('#Builds option:selected').val(); 
         startDate = $('#DateBegin').val(); 
         endDate = $('#DateEnd').val(); 
         return programID + '|' + buildID + '|' + startDate + '|' + endDate; 
        }, 
        reloadAfterSubmit: true, 
        closeAfterDelete: true 
       } 
      }, // settings for delete 
      {sopt: ["cn"]} // Search options. Some options can be set on column level 
    );