free-jqgrid: mutliselect in free-jqgrid 4.14.0

Nicht sicher, warum das Multi-Auswahl nicht funktioniert, wenn ich mehr als einen Wert auswählen. Ich benutze free-jqgrid 4.14.0 und multiselect js von erichynds. Auch das Multi-Select kommt nicht als Drop-Down. Fehle ich jede CSS oder irgendetwas ...free-jqgrid: mutliselect in free-jqgrid 4.14.0

Jede Hilfe bitte ...

Erstellt Geige, aber da ich nicht Geige an meinem Arbeitsplatz zugreifen kann, habe ich mein Handy, so ist es nicht funktioniert jetzt. Ich muss etwas verpasst haben. https://jsfiddle.net/SudhirSahoo/h2k1ok2u/

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>SKumar - JQGrid</title> 
 
    <meta name="author" content="SK Inspired from Oleg"> 
 
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css"> 
 
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 
 
\t <link rel="stylesheet" href="http://www.ok-soft-gmbh.com/jqGrid/jquery-ui-multiselect/1.13.6/jquery.multiselect.css" /> 
 
    <!--<link rel="stylesheet" href="jqGrid/css/ui.jqgrid.css">--> 
 
    <link rel="stylesheet" href="http://rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.css"> 
 
\t 
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
\t <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
\t <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery-ui-multiselect/1.13.6/jquery.multiselect.js"></script> 
 
    <style type="text/css"> 
 
     html, body { font-size: 75%; } 
 
\t \t #gridSearchResult { 
 
\t \t \t height: 460px; 
 
\t \t } 
 
    </style> 
 
    <script type="text/javascript"> 
 
     $.jgrid = $.jgrid || {}; 
 
     $.jgrid.no_legacy_api = true; 
 
     $.jgrid.useJSON = true; 
 
    </script> 
 
    <!--<script src="http://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script> --> 
 
\t <script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script> 
 
    <!--<script src="jqGrid/js/jquery.jqGrid.src.js"></script>--> 
 
    <script type="text/javascript"> 
 
    //<![CDATA[ 
 
     /*global $ */ 
 
     /*jslint eqeq: true, browser: true, plusplus: true */ 
 
     $(function() { 
 
      "use strict"; 
 
      var $grid = $("#list"), 
 
       gridData, 
 
       startTime, 
 
       measureTime = false, 
 
       timeInterval, 
 
\t \t \t \t myDefaultSearch = "cn", 
 
       getColumnIndexByName = function (columnName) { 
 
        var cm = $(this).jqGrid('getGridParam', 'colModel'), i, l = cm.length; 
 
        for (i = 0; i < l; i += 1) { 
 
         if (cm[i].name === columnName) { 
 
          return i; // return the index 
 
         } 
 
        } 
 
        return -1; 
 
       }, 
 
       modifySearchingFilter = function (separator) { 
 
        var i, l, rules, rule, parts, j, group, str, iCol, cmi, cm = this.p.colModel, 
 
         filters = $.parseJSON(this.p.postData.filters); 
 
        if (filters && typeof filters.rules !== 'undefined' && filters.rules.length > 0) { 
 
         rules = filters.rules; 
 
         for (i = 0; i < rules.length; i++) { 
 
          rule = rules[i]; 
 
          iCol = getColumnIndexByName.call(this, rule.field); 
 
          cmi = cm[iCol]; 
 
          if (iCol >= 0 && ((typeof (cmi.searchoptions) === "undefined" || 
 
            typeof (cmi.searchoptions.sopt) === "undefined") 
 
           && rule.op === myDefaultSearch) || 
 
            (typeof (cmi.searchoptions) === "object" && 
 
             $.isArray(cmi.searchoptions.sopt) && 
 
             cmi.searchoptions.sopt[0] === rule.op)) { 
 
           // make modifications only for the 'contains' operation 
 
           parts = rule.data.split(separator); 
 
           if (parts.length > 1) { 
 
            if (typeof filters.groups === 'undefined') { 
 
             filters.groups = []; 
 
            } 
 
            group = { 
 
             groupOp: 'OR', 
 
             groups: [], 
 
             rules: [] 
 
            }; 
 
            filters.groups.push(group); 
 
            for (j = 0, l = parts.length; j < l; j++) { 
 
             str = parts[j]; 
 
             if (str) { 
 
              // skip empty '', which exist in case of two separaters of once 
 
              group.rules.push({ 
 
               data: parts[j], 
 
               op: rule.op, 
 
               field: rule.field 
 
              }); 
 
             } 
 
            } 
 
            rules.splice(i, 1); 
 
            i--; // to skip i++ 
 
           } 
 
          } 
 
         } 
 
         this.p.postData.filters = JSON.stringify(filters); 
 
        } 
 
       }, 
 
       dataInitMultiselect = function (elem) { 
 
        setTimeout(function() { 
 
         var $elem = $(elem), id = elem.id, 
 
          inToolbar = typeof id === "string" && id.substr(0,3) === "gs_"; 
 
          options = { 
 
           selectedList: 2, 
 
           height: "auto", 
 
           checkAllText: "All", 
 
           uncheckAllText: "None", 
 
           noneSelectedText: "Any", 
 
           open: function() { 
 
            var $menu = $(".ui-multiselect-menu:visible"); 
 
            $menu.width("auto"); 
 
            return; 
 
           } 
 
          }; 
 
         if (inToolbar) { 
 
          options.minWidth = 'auto'; 
 
         } 
 
         $elem.multiselect(options); 
 
         $elem.siblings('button.ui-multiselect').css({ 
 
          width: inToolbar? "98%": "100%", 
 
          marginTop: "1px", 
 
          marginBottom: "1px", 
 
          paddingTop: "3px" 
 
         }); 
 
        }, 50); 
 
       }; 
 

 

 
      var date = new Date(), t = Object.prototype.toString.call(date), t1 = String(date); 
 

 
\t \t \t $("#search").click(function() { 
 
\t \t \t \t var statesAsString = getStates(); 
 
\t \t \t \t startTime = new Date(); 
 
\t \t \t \t $grid.jqGrid({ 
 
\t \t \t \t \t datatype: 'json', 
 
\t \t \t \t \t url: 'https://api.myjson.com/bins/efhbt', 
 
\t \t \t \t \t mtype: 'GET', 
 
\t \t \t \t \t \t \t colNames: ['aa', 'bb', 'cc', 'dd', 'ee', 'ff', 'gg', 'hh', 'ii', 'Priority', 'Due Date', 'll', 'mm'], 
 
\t \t \t \t \t colModel: [ 
 
\t \t \t \t \t \t { name: "aa", width: 200, label: "c01", frozen: true }, 
 
\t \t \t \t \t \t { name: "bb", width: 200, label: "c02", frozen: true }, 
 
\t \t \t \t \t \t { name: "cc", width: 100, label: "c03", frozen: true, search: true, 
 
\t \t \t \t \t \t \t stype:'select', 
 
\t \t \t \t \t \t \t \t searchoptions: { 
 
\t \t \t \t \t \t \t \t \t sopt: ['eq','ne'], 
 
\t \t \t \t \t \t \t \t \t value: statesAsString, 
 
\t \t \t \t \t \t \t \t \t attr: {multiple: 'multiple', size: 3}, 
 
\t \t \t \t \t \t \t \t \t dataInit: dataInitMultiselect 
 
\t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t }, 
 
\t \t \t \t \t \t { name: "dd", width: 100, label: "c04" }, 
 
\t \t \t \t \t \t { name: "ee", width: 100, label: "c05" }, 
 
\t \t \t \t \t \t { name: "ff", label: "c06" }, 
 
\t \t \t \t \t \t { name: "gg", label: "c07", editable: true, stype: 'select', formatter: 'select', 
 
\t \t \t \t \t \t \t edittype: 'select', editoptions: { 
 
\t \t \t \t \t \t \t \t value: 'Select:Select;Y:Yes;N:No', 
 
\t \t \t \t \t \t \t \t multiple: false 
 
\t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t }, 
 
\t \t \t \t \t \t { name: "hh", label: "c08", editable: true, stype: 'select', formatter: 'select', 
 
\t \t \t \t \t \t \t edittype: 'select', editoptions: { 
 
\t \t \t \t \t \t \t \t value: 'Select:Select;Y:Yes;N:No', 
 
\t \t \t \t \t \t \t \t multiple: false 
 
\t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t }, 
 
\t \t \t \t \t \t { name: "ii", label: "c09", editable: true, stype: 'select', formatter: 'select', 
 
\t \t \t \t \t \t \t edittype: 'select', editoptions: { 
 
\t \t \t \t \t \t \t \t value: 'Select:Select;Y:Yes;N:No', 
 
\t \t \t \t \t \t \t \t multiple: false 
 
\t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t }, 
 
\t \t \t \t \t \t { name: "jj", label: "c10", width: 100, editable: true }, 
 
\t \t \t \t \t \t { name: "kk", label: "c11", width: 100, editable: true, 
 
\t \t \t \t \t \t \t formatter:'date', formatoptions: {newformat:'Y-m-d'}, datefmt: 'Y-m-d', 
 
\t \t \t \t \t \t \t editoptions: { 
 
\t \t \t \t \t \t \t \t size:20, 
 
\t \t \t \t \t \t \t \t dataInit: function(el){ 
 
\t \t \t \t \t \t \t \t \t $(el).datepicker({ 
 
\t \t \t \t \t \t \t \t \t \t dateFormat: 'yy-mm-dd', 
 
\t \t \t \t \t \t \t \t \t \t changeYear: true, 
 
\t \t \t \t \t \t \t \t \t \t changeMonth: true, 
 
\t \t \t \t \t \t \t \t \t \t showWeek: true, 
 
\t \t \t \t \t \t \t \t \t \t yearRange: '1999:+1', 
 
\t \t \t \t \t \t \t \t \t \t minDate: new Date() 
 
\t \t \t \t \t \t \t \t \t }); 
 
\t \t \t \t \t \t \t \t }, 
 
\t \t \t \t \t \t \t \t defaultValue: function(){ 
 
\t \t \t \t \t \t \t \t \t var currentTime = new Date(); 
 
\t \t \t \t \t \t \t \t \t var month = parseInt(currentTime.getMonth() + 1); 
 
\t \t \t \t \t \t \t \t \t month = month <= 9 ? "0"+month : month; 
 
\t \t \t \t \t \t \t \t \t var day = currentTime.getDate(); 
 
\t \t \t \t \t \t \t \t \t day = day <= 9 ? "0"+day : day; 
 
\t \t \t \t \t \t \t \t \t var year = currentTime.getFullYear(); 
 
\t \t \t \t \t \t \t \t \t return year+"-"+month + "-"+day; 
 
\t \t \t \t \t \t \t \t }, 
 
\t \t \t \t \t \t \t \t maxlength: 10 
 
\t \t \t \t \t \t \t }, 
 
\t \t \t \t \t \t \t searchoptions: { 
 
\t \t \t \t \t \t \t \t sopt: ['eq'], 
 
\t \t \t \t \t \t \t \t dataInit: function (elem) { 
 
\t \t \t \t \t \t \t \t \t $(elem).datepicker({ 
 
\t \t \t \t \t \t \t \t \t \t dateFormat: 'yy-mm-dd', 
 
\t \t \t \t \t \t \t \t \t \t changeYear: true, 
 
\t \t \t \t \t \t \t \t \t \t changeMonth: true,        
 
\t \t \t \t \t \t \t \t \t \t showWeek: true, 
 
\t \t \t \t \t \t \t \t \t \t showButtonPanel: true, 
 
\t \t \t \t \t \t \t \t \t \t autoclose: false, 
 
\t \t \t \t \t \t \t \t \t \t currentText: "Clear", 
 
\t \t \t \t \t \t \t \t \t \t closeText: "Filter", 
 
\t \t \t \t \t \t \t \t \t \t yearRange: '1999:+1', 
 
\t \t \t \t \t \t \t \t \t \t onSelect: function(selectedDate, inst) { 
 
\t \t \t \t \t \t \t \t \t \t \t $(this).focus(); 
 
\t \t \t \t \t \t \t \t \t \t \t var target = $(selectedDate); 
 
\t \t \t \t \t \t \t \t \t \t \t var inst = this._getInst(target[0]); 
 
\t \t \t \t \t \t \t \t \t \t \t inst.inline = true; 
 
\t \t \t \t \t \t \t \t \t \t \t $.datepicker._selectDateOverload(selectedDate, inst); 
 
\t \t \t \t \t \t \t \t \t \t \t inst.inline = false; 
 
\t \t \t \t \t \t \t \t \t \t \t this._updateDatepicker(inst); 
 
\t \t \t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t \t \t }).focus(function() { 
 
\t \t \t \t \t \t \t \t \t \t var thisCalendar = $(this); 
 
\t \t \t \t \t \t \t \t \t \t $('.ui-datepicker-close').click(function() { 
 
\t \t \t \t \t \t \t \t \t \t \t var selectedDate = $("#gs_kk").val(); 
 
\t \t \t \t \t \t \t \t \t \t \t setTimeout(function() { 
 
\t \t \t \t \t \t \t \t \t \t \t \t $('#list')[0].triggerToolbar(); 
 
\t \t \t \t \t \t \t \t \t \t \t }, 100); 
 
\t \t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t }); 
 
\t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t $('.ui-datepicker-current').click(function() { 
 
\t \t \t \t \t \t \t \t \t \t \t var selectedDate = $("#gs_kk").val(''); 
 
\t \t \t \t \t \t \t \t \t \t }); 
 
\t \t \t \t \t \t \t \t \t }); 
 
\t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t }, 
 
\t \t \t \t \t \t { name: "ll", label: "c12", editable: true }, 
 
\t \t \t \t \t \t { name: "mm", label: "c13", editable: true } 
 
\t \t \t \t \t ], 
 
\t \t \t \t \t cmTemplate: { width: 100, autoResizable: true }, 
 
\t \t \t \t \t rowNum: 1000, 
 
\t \t \t \t \t records: 1000, 
 
\t \t \t \t \t rownumWidth: 40, 
 
\t \t \t \t \t rowList: [20, 100, 1000, 10000, "100000:All"], 
 
\t \t \t \t \t viewrecords: true, 
 
\t \t \t \t \t rownumbers: true, 
 
\t \t \t \t \t toppager: false, 
 
\t \t \t \t \t pager: false, 
 
\t \t \t \t \t shrinkToFit: false, 
 
\t \t \t \t \t multiselect: true, 
 
\t \t \t \t \t editurl: 'clientArray', 
 
\t \t \t \t \t loadonce: true, 
 
\t \t \t \t \t width: 800, 
 
\t \t \t \t \t height: 400, 
 
\t \t \t \t \t onSortCol: function() { 
 
\t \t \t \t \t \t startTime = new Date(); 
 
\t \t \t \t \t \t measureTime = true; 
 
\t \t \t \t \t }, 
 
\t \t \t \t \t /*onSelectRow: function (rowid) { 
 
\t \t \t \t \t \t var $self = $(this), 
 
\t \t \t \t \t \t \t savedRow = $self.jqGrid("getGridParam", "savedRow"); 
 
\t \t \t \t \t \t if (savedRow.length > 0) { 
 
\t \t \t \t \t \t \t $self.jqGrid("restoreRow", savedRow[0].id); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t $self.jqGrid("editRow", rowid); 
 
\t \t \t \t \t },*/ 
 
\t \t \t \t \t loadComplete: function() { 
 
\t \t \t \t \t \t if (measureTime) { 
 
\t \t \t \t \t \t \t setTimeout(function() { 
 
\t \t \t \t \t \t \t \t //alert("Total loading time: " + timeInterval + "ms"); 
 
\t \t \t \t \t \t \t }, 50); 
 
\t \t \t \t \t \t \t measureTime = false; 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t }, 
 
\t \t \t \t \t autoencode: true, 
 
\t \t \t \t \t caption: "Shows the performance of resizing. Make double-click on the column resizer" 
 
\t \t \t \t }).jqGrid("filterToolbar", { 
 
\t \t \t \t \t \t beforeSearch: function() { 
 
\t \t \t \t \t \t \t startTime = new Date(); 
 
\t \t \t \t \t \t \t measureTime = true; 
 
\t \t \t \t \t \t \t return false; // allow filtering 
 
\t \t \t \t \t \t } 
 
\t \t \t \t }).jqGrid("gridResize"); 
 
\t \t \t \t $grid.jqGrid("setFrozenColumns"); 
 
\t \t \t }); 
 
\t \t \t 
 
\t \t \t 
 
      timeInterval = new Date() - startTime; 
 
      setTimeout(function() { 
 
       // alert("Total time: " + timeInterval + "ms"); 
 
      }, 50); 
 

 
\t \t \t 
 

 

 
\t \t \t // On Click Of Button 
 
\t \t \t $("#Change_Value").click(function() { 
 
\t \t \t \t var v = $("#name").val(); 
 
\t \t \t \t var myGrid = $("#list"); 
 
\t \t \t \t var selRowIds = myGrid.jqGrid("getGridParam", "selarrrow"); 
 
\t \t \t \t //alert(selRowId.length); 
 
\t \t \t \t for (var i = 0; i < selRowIds.length; i++) { 
 
\t \t \t \t \t //rowData = myGrid.jqGrid("getLocalRow", selRowIds[i]); 
 
\t \t \t \t \t // one can uses the data here 
 
\t \t \t \t \t myGrid.jqGrid("editRow", selRowIds[i], true); 
 
\t \t \t \t } 
 
\t \t \t }); 
 
     }); 
 
\t \t 
 
\t \t function getStates() { 
 
\t \t \t var statesAsString = ''; 
 
\t \t \t $.ajax({ 
 
\t \t \t \t type \t : "GET", 
 
\t \t \t \t url \t : "https://api.myjson.com/bins/xvjhl", 
 
\t \t \t \t ContentType : 'json', 
 
\t \t \t \t cache: false, 
 
\t \t \t \t async: false, 
 
\t \t \t \t success \t : function (data) { 
 
\t \t \t \t \t var len = data.length; 
 
\t \t \t \t \t for (var i = 0; i < len; i++) { 
 
\t \t \t \t \t \t if(!(data[i] == null || data[i].toUpperCase() == 'NULL')) 
 
\t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t statesAsString += data[i] + ':' + data[i]+ ';'; 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t } \t 
 
\t \t \t \t \t \t statesAsString = statesAsString.slice(0, -1); \t \t \t \t 
 
\t \t \t \t } 
 
\t \t \t }) 
 
\t \t \t return statesAsString; 
 
\t \t } 
 
    //]]> 
 
    </script> 
 
</head> 
 
<body> 
 
    <div style="border: 1px solid black; padding-top: 10px; padding-bottom: 10px;"> 
 
\t \t <TABLE width="100%"> 
 
\t \t \t <TBODY> 
 
\t \t \t \t <TR> 
 
\t \t \t \t \t <TD align=left> 
 
\t \t \t \t \t \t Country: <input type="text" name="country" id="country" /> 
 
\t \t \t \t \t \t &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
 
\t \t \t \t \t \t State: <input type="text" name="state" id="state" /> 
 
\t \t \t \t \t \t &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
 
\t \t \t \t \t \t <input type="button" name="search" id="search" value="Search" />&nbsp;&nbsp; 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t <input type="button" name="reset" id="reset" value="Reset" /> 
 
\t \t \t \t \t </TD> 
 
\t \t \t \t \t <TD align=right> 
 
\t \t \t \t \t \t <input type="button" name="Change_Value" id="Change_Value" value="Change Priority to High" /> 
 
\t \t \t \t \t </TD> 
 
\t \t \t \t </TR> 
 
\t \t \t </TBODY> 
 
\t \t </TABLE> 
 
\t </div> 
 
\t 
 
    <div id='gridSearchResult' style="margin-top: 10px;"> 
 
\t \t <table id="list"></table> 
 
    </div> 
 
\t <div style="border: 1px solid black; align: centre; margin-top: 10px; padding-top: 10px; padding-bottom: 10px;"> 
 
\t \t <TABLE width="100%"> 
 
\t \t <TBODY> 
 
\t \t \t <TR> 
 
\t \t \t \t <TD align=center> 
 
\t \t \t \t \t <input type="button" name="save" id="save" value="Save" />&nbsp;&nbsp; 
 
\t \t \t \t \t 
 
\t \t \t \t \t <input type="button" name="submit" id="submit" value="Submit" /> 
 
\t \t \t \t </TD> 
 
\t   \t </TR> 
 
\t \t </TBODY> 
 
\t </TABLE> 
 
\t </div> 
 
</body> 
 
</html>

Quelle

2017-03-08 SKumar

Sie verwenden sehr alte Codebeispiel, das ich vor dem Start des Projekts frei jqGrid schrieb. Freier jqGrid unterstützt jetzt viele Funktionen, die den Code vereinfachen kann (und es arbeitet zu machen)

Die Demo https://jsfiddle.net/OlegKi/h0mwtw8s/ verwendet den folgenden Code ein:

var dataInitMultiselect = function(elem, searchOptions) { 
    var $grid = $(this); 
    setTimeout(function() { 
     var $elem = $(elem), 
      id = elem.id, 
      inToolbar = searchOptions.mode === "filter", 
      options = { 
       selectedList: 2, 
       height: "auto", 
       checkAllText: "all", 
       uncheckAllText: "no", 
       noneSelectedText: "Any", 
       open: function() { 
        var $menu = $(".ui-multiselect-menu:visible"); 
        $menu.width("auto"); 
        $menu.find(">ul").css("maxHeight", "200px"); 
        return; 
       } 
      }, 
      $options = $elem.find("option"); 
     if (inToolbar) { 
      options.minWidth = "auto"; 
     } 
     $grid.triggerHandler("jqGridRefreshFilterValues"); 
     $elem.multiselect(options); 
     $elem.siblings("button.ui-multiselect").css({ 
      width: "100%", 
      margin: "1px 0", 
      paddingTop: ".3em", 
      paddingBottom: ".3em" 
     }); 
    }, 50); 
}, 
multiselectTemplate = { 
    stype: "select", 
    searchoptions: { 
     generateValue: true, 
     //noFilterText: "Any", 
     sopt: ["in"], 
     attr: { 
      multiple: "multiple", 
      size: 4 
     }, 
     dataInit: dataInitMultiselect 
    } 
}; 

$("#jqGridA").jqGrid({ 
    url: "...", 
    datatype: "json", 
    forceClientSorting: true, 
    loadonce: true, 
    colNames: ["Client", "Amount", "Tax", "Total", "Shipped via", "Notes"], 
    colModel: [ 
     {name: "name", width: 85, editable: true, 
      template: multiselectTemplate}, 
     {name: "amount", width: 75, template: "number"}, 
     {name: "tax", width: 52, template: "number"}, 
     {name: "total", width: 65, template: "number", editable:true}, 
     {name: "ship_via", width: 85, align: "center", 
      template: multiselectTemplate}, 
     {name: "note", width: 100, sortable: false} 
    ], 
    rowNum: 10, 
    loadui: "block", 
    inFilterSeparator: ";", 
    multiselect: true, 
    multiPageSelection: true, 
    loadComplete: function() { 
     if (!this.ftoolbar) { 
      // create filter toolbar if it isn't exist 
      $(this).jqGrid("filterToolbar", { 
       defaultSearch: "cn", 
       beforeClear: function() { 
        $(this.grid.hDiv) 
         .find(".ui-search-toolbar button.ui-multiselect") 
         .each(function() { 
         $(this).prev("select[multiple]").multiselect("refresh"); 
        }); 
       } 
      }); 
      $(this).triggerHandler("jqGridRefreshFilterValues"); 
      $(this.grid.hDiv) 
       .find(".ui-search-toolbar button.ui-multiselect") 
       .each(function() { 
       $(this).prev("select[multiple]") 
        .multiselect("refresh"); 
      });   
     } 
    }, 
    rowList: [10, 20, 30, 100], 
    pager: true, 
    pagerRightWidth: 135, // fix wrapping or right part of the pager 
    viewrecords: true, 
    sortable: true, 
    shrinkToFit: false 
}).jqGrid("navGrid", {edit: true, add: false, del: false, search: false}, 
{ 
    afterComplete: function(response, postdata) { 
    $(this).jqGrid('resetSelection'); 
    var p = $(this).jqGrid("getGridParam"); 
    p.selarrrow = []; 
    beforeProcessingHandler.call(this, p.data); 
    } 
});

Quelle

2017-03-08 16:11:56 Oleg

Können wir nicht gesetzt Wert von Multi-Select-Dropdown wie wir es früher gemacht haben. Zum Beispiel stammen meine Dropdown-Werte für die Mehrfachauswahl von einem anderen Dienst. der frühere Ansatz war: Suchoption: { \t \t \t \t \t \t \t \t \t sopt: [ 'eq', 'ne'], \t \t \t \t \t \t \t \t \t Wert: scorecardAsString, \t \t \t \t \t \t \t \t \t attr: {mehrfach: 'multiple', Größe: 3}, \t \t \t \t \t \t \t \t dataInit: dataInitMultiselect \t \t \t \t \t \t \t \t} – SKumar

Dank Oleg, ich sehe es nicht leicht ist, von einer älteren Version von jqGrid auf die neueste Version zu migrieren. Nachdem ich diese Änderung vorgenommen habe, stehe ich jetzt vor vielen Problemen. – SKumar

@SKumar: Entschuldigung, aber Sie haben die Version ** 4.3 ** verwendet, die mehr als 5 Jahre alt ist. Sie müssen vor vielen Jahren auf eine neuere Version migrieren. Du musst jetzt den Job machen, den du letztes Jahr übersprungen hast. Ich empfehle Ihnen, direkt nach der Veröffentlichung der nächsten Version auf die neue Version zu migrieren (oder einige Kompatibilitätsprobleme zu testen). Zum Beispiel unterstützt sowohl Chrome als auch Firefox nur die neueste und die vorherige Version. Chrome veröffentlicht alle 1,5 Monate eine neue Version. So * müssen * Sie die Migration auf die nächste Version von Chrome in 1-3 Monaten organisieren. 5 Jahre inakzeptabel für die Webentwicklung. – Oleg

free-jqgrid: mutliselect in free-jqgrid 4.14.0

Antwort

Verwandte Themen