jquery - 在 jqGrid 中使用 jQuery UI Spinner

Question

嗨，我正在 jqGrid 中使用 jQuery UI Spinner 作为 NofQ 列。我可以在编辑表单中看到用于添加/编辑的微调器但问题来自编辑表单。当我提交以编辑表单创建新记录时，Spinner 中的当前值不会传递到后端代码。如果我删除微调器并替换为默认文本框，那么我可以在提交时在后端代码中看到输入的值。请修改下面的 jqGrid 脚本

var js = document.createElement("script");
js.type = "text/javascript";   
var lastSel = -1;
var grid = jQuery("#list");
var defaultvalue = {
    '0': 'Select'
};

editSettings = {
    recreateForm: true,
    jqModal: false,
    reloadAfterSubmit: false,
    closeOnEscape: true,
    savekey: [true, 13],
    closeAfterEdit: true

},
   addSettings = {
       editData: { TestID: testId },
       recreateForm: true,
       jqModal: false,
       reloadAfterSubmit: true,
       savekey: [true, 13],
       closeOnEscape: true,
       closeAfterAdd: true,
       width: 700,
       url: paramFromView.AddUrl,
       beforeShowForm: function (form) {           
        $("#tr_NoOfQ", form).show();
        $("#NoOfQ.FormElement", form).width(35);
        $("#NoOfQ.FormElement", form).height(10);
        $("#NoOfQ.FormElement", form).spinner('option', 'min', 1);
        $("#NoOfQ.FormElement", form).spinner('option', 'max', 15);*/

       }
   },
   delSettings = {
       jqModal: false,
       url: paramFromView.AddUrl,
       delData: {
           ID: function () {
               var sel_id = grid.jqGrid('getGridParam', 'selrow');
               var value = grid.jqGrid('getCell', sel_id, 'ID');
               return value;
           },
           TestID: testId
       }
   },
jQuery("#list").jqGrid({
    url: paramFromView.Url + '/' + testId,
    datatype: "json",
    jsonReader: { repeatitems: false, root: "rows", page: "page", total: "total", records: "records" },
    colNames: ['DetailDataID', 'Category', 'SubCategory', 'ID', 'NoOfQ'],
    colModel: [
                { name: 'DetailDataID', index: 'id', hidden: true, width: 5 },
                { name: 'Category', width: 80, editable: true, edittype: 'select', editoptions: { value: defaultvalue } },
                { name: 'ID', hidden: true, width: 100 },
                {
                    name: 'NoOfQ', index: 'NoOfQ', width: 15, editable: true, summaryType: 'sum'
                }
    ],

    rowNum: 20,
    rowList: [10, 20, 30],
    height: 300,
    width: 700,
    pager: '#pager',
    loadonce: false,
    viewrecords: true
}).jqGrid('navGrid', '#pager', { edit: false }, editSettings, addSettings, delSettings);

Answer 1

问题出在 the line jqGrid代码

$(frmtb+" > tbody > tr > td > .FormElement").each(function() { ... }

使用 td > .FormElement选择器中的一部分。问题是spinner包裹原件<input> <span> 内的元素元素和td > .FormElement没有找到该元素。

要在不更改 jqGrid 代码的情况下解决问题，可以使用 edittype: "custom" 。您可以删除 spinner 的所有来电来自beforeShowForm并使用 NoOfQ 的以下定义列代替:

{
    name: "NoOfQ",
    width: 15,
    editable: true,
    edittype: "custom",
    editoptions: {
        custom_element: function (value, options) {
            return '<input type="text" value="' + value + '"/>';
        },
        custom_value: function (elem, operation, value) {
            if (operation === "get") {
                return $(elem).val();
            } else if (operation === "set") {
                $(elem).val(value);
            } else {
                return "";
            }
        },
        dataInit: function (elem) {
            $(elem).find(">input").spinner({
                min: 1,
                max: 15
            });
        }
    }
}

应该可以解决这个问题。您可以在下面的演示中看到结果:

$(function () {
  "use strict";
  var mydata = [
    { myid: "10",  invdate: "2007-10-01", name: "test1", note: "note1",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
    { myid: "20",  invdate: "2007-10-02", name: "test1", note: "note2",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
    { myid: "30",  invdate: "2007-09-01", name: "test3", note: "note3",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
    { myid: "40",  invdate: "2007-10-04", name: "test2", note: "note4",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
    { myid: "50",  invdate: "2007-10-31", name: "test2", note: "note5",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
    { myid: "60",  invdate: "2007-09-06", name: "test3", note: "note6",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
    { myid: "70",  invdate: "2007-10-04", name: "test3", note: "note7",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
    { myid: "80",  invdate: "2007-10-03", name: "test1", note: "note8",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
    { myid: "90",  invdate: "2007-09-01", name: "test3", note: "note9",  amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },
    { myid: "100", invdate: "2007-09-08", name: "test2", note: "note10", amount: "500.00", tax: "30.00", closed: true,  ship_via: "TN", total: "530.00" },
    { myid: "110", invdate: "2007-09-08", name: "test2", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
    { myid: "120", invdate: "2007-09-10", name: "test3", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }
  ],
      $grid = $("#list"),
      initDateEdit = function (elem) {
        $(elem).datepicker({
          dateFormat: "dd-M-yy",
          autoSize: true,
          changeYear: true,
          changeMonth: true,
          showButtonPanel: true,
          showWeek: true
        });
      },
      initDateSearch = function (elem) {
        var $self = $(this);
        setTimeout(function () {
          $(elem).datepicker({
            dateFormat: "dd-M-yy",
            autoSize: true,
            changeYear: true,
            changeMonth: true,
            showWeek: true,
            showButtonPanel: true,
            onSelect: function () {
              if (this.id.substr(0, 3) === "gs_") {
                // call triggerToolbar only in case of searching toolbar
                setTimeout(function () {
                  $self[0].triggerToolbar();
                }, 100);
              }
            }
          });
        }, 100);
      },
      numberTemplate = {formatter: "number", align: "right", sorttype: "number",
                        editrules: {number: true},
                        searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge", "nu", "nn", "in", "ni"] }};

  $grid.jqGrid({
    datatype: "local",
    data: mydata,
    colNames: ["Client", "Date", "Closed", "Shipped via", "Notes", "Tax", "Amount", "Total"],
    colModel: [
      { name: "name", align: "center", editable: true, width: 65, editrules: {required: true} },
      { name: "invdate", width: 80, align: "center", sorttype: "date",
       formatter: "date", formatoptions: { newformat: "d-M-Y" }, editable: true, datefmt: "d-M-Y",
       editoptions: { dataInit: initDateEdit },
       searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDateSearch } },
      { name: "closed", width: 70, align: "center", editable: true, formatter: "checkbox",
       edittype: "checkbox", editoptions: {value: "Yes:No", defaultValue: "Yes"},
       stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;true:Yes;false:No" } },
      { name: "ship_via", width: 105, align: "center", editable: true, formatter: "select",
       edittype: "select", editoptions: { value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "IN" },
       stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;FE:FedEx;TN:TNT;IN:IN" } },
      { name: "note", width: 60, sortable: false, editable: true, edittype: "textarea" },
      { name: "tax", width: 52, editable: true, template: numberTemplate, hidden: true  },
      { name: "amount", width: 75, editable: true, template: numberTemplate,
          edittype: "custom",
          editoptions: {
              custom_element: function (value, options) {
                  return '<input type="text" value="' + value + '"/>';
              },
              custom_value: function (elem, operation, value) {
                  if (operation === "get") {
                      return $(elem).val();
                  } else if (operation === "set") {
                      $(elem).val(value);
                  } else {
                      return "";
                  }
              },
              dataInit: function (elem) {
                  $(elem).find(">input").spinner({
                      min: 1,
                      max: 15
                  });
              }
          }},
      { name: "total", width: 60, template: numberTemplate }
    ],
    rowNum: 10,
    localReader: { id: "myid" },
    rowList: [5, 10, 20],
    pager: "#pager",
    toppager: true,
    gridview: true,
    autoencode: true,
    ignoreCase: true,
    sortname: "name",
    viewrecords: true,
    sortorder: "desc",
    rownumbers: true,
    shrinkToFit: false,
    height: "auto"
  });
  // set your defaults for Advanced Searching or filterToolbar
  $.extend($.jgrid.search, {
    multipleSearch: true,
    multipleGroup: true,
    recreateFilter: true,
    closeOnEscape: true,
    closeAfterSearch: true,
    closeAfterReset: true,
    searchOnEnter: true,
    showQuery: true,
    overlay: 0,
    stringResult: true,
    defaultSearch: 'cn'
  });
  $grid.jqGrid("navGrid", "#pager", {add: false, edit: true, del: false, search: false, refresh: false, view: true, cloneToTop: true});
  $grid.jqGrid("editGridRow", "120", {
      beforeSubmit: function (postdata) {
          alert("postdata=" + JSON.stringify(postdata));
      }
  }); // edit some row
});

<link href="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css" rel="stylesheet"/>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/redmond/jquery-ui.css" rel="stylesheet"/>
<style type="text/css">
    html, body { font-size: 75%; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
  $.jgrid.no_legacy_api = true;
  $.jgrid.useJSON = true;
</script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>

<table id="list"><tr><td></td></tr></table>
<div id="pager"></div>

或者可以更改上面引用的选择器 frmtb+" > tbody > tr > td > .FormElement"在 jqGrid 代码中为 frmtb + ">tbody>tr>td .FormElement" .

最后一句话:您应该修复代码中的所有语法错误:删除 */ ，包括var之前editSettings ，替换,在 delSettings 末尾初始化(直接在 jQuery("#list").jqGrid({...}); 之前)到 ;等等。您应该考虑添加 key: true到 ID 的定义(通知使用 ID 属性的值作为 rowid)或仅删除不需要的隐藏 'ID'列(也不要忘记从 colName 中删除相应的项目)并使用 jsonReader: { repeatitems: false, id: "ID" } .

已更新:我在 the bug report 中用我的建议描述了问题。 。 jqGrid的主要代码现在由Tony修复(参见here)。所以jqGrid的下一个版本(版本更高为4.6.0)应该不会出现所描述的问题。