jqGrid 在 keyup 事件上未能正确重新加载或刷新。

huangapple go评论94阅读模式
英文:

jqGrid is not reloading or refreshing properly on keyup event

问题

I needed to create a search page where various types of text, dropdown, date field will be there. i added onkeyup function to every text field so that whenever i put any text or number a grid will appear with subgrid. The issue i am facing is if i give input for the first time then the grid appear with correct data. if i clear that field then the grid is reloading also but if i input again in that field or any other text field then the js is not sending request to the action method with updated post value.

Here is my View Part:

  1. <section class="content">
  2. <div class="container-fluid">
  3. <!-- SELECT2 EXAMPLE -->
  4. <!-- SELECT2 EXAMPLE -->
  5. <div class="card card-info">
  6. <div class="card-header">
  7. <h3 class="card-title">Search Criteria</h3>
  8. <div class="card-tools">
  9. <button type="button" class="btn btn-tool" data-card-widget="collapse">
  10. <i class="fas fa-minus"></i>
  11. </button>
  12. </div>
  13. </div>
  14. <!-- /.card-header -->
  15. @using (Html.BeginForm("SearchReport", "LRLiveSearch", FormMethod.Post))
  16. {
  17. <div class="card-body">
  18. <div class="row">
  19. <div class="col-md-12" style="line-height:1.50px;">
  20. <div class="row">
  21. <div class="col-md-2">
  22. <div class="form-group">
  23. <label>Deed No</label>
  24. @Html.TextBoxFor(model => model.DeedNo, new { @class = "form-control", onkeyup = "LiveSearch('DN', this.value)" })
  25. </div>
  26. </div>
  27. <div class="col-md-2">
  28. <div class="form-group">
  29. <label>Deed Identity</label>
  30. @Html.TextBoxFor(model => model.DeedId, new { @class = "form-control", onkeyup = "LiveSearch('DI', this.value)" })
  31. </div>
  32. </div>
  33. <div class="col-md-2">
  34. <div class="form-group">
  35. <label>Client Name</label>
  36. @Html.TextBoxFor(model => model.ClientName, new { @class = "form-control", onkeyup = "LiveSearch('CN', this.value)" })
  37. </div>
  38. </div>
  39. <div class="col-md-2">
  40. <div class="form-group">
  41. <label>Client Contact Number</label>
  42. @Html.TextBoxFor(model => model.ClientPhoneNumber, new { @class = "form-control", onkeyup = "LiveSearch('CP', this.value)" })
  43. </div>
  44. </div>
  45. <div class="col-md-2">
  46. <div class="form-group">
  47. <label>MR No</label>
  48. @Html.TextBoxFor(model => model.MRNo, new { @class = "form-control", onkeyup = "LiveSearch('MR', this.value)" })
  49. </div>
  50. </div>
  51. <div class="col-md-2">
  52. <div class="form-group">
  53. <label>Cheque No</label>
  54. @Html.TextBoxFor(model => model.ChequeNo, new { @class = "form-control", onkeyup = "LiveSearch('CQN', this.value)" })
  55. </div>
  56. </div>
  57. </div>
  58. <div class="row">
  59. <div class="col-md-2">
  60. <div class="form-group">
  61. <label>Collection Type</label>
  62. @Html.DropDownListFor(model => model.CollectionType, Model.CollectionTypeList, new { @class = "form-control" })
  63. </div>
  64. </div>
  65. <div class="col-md-2">
  66. <div class="form-group">
  67. <label>From Date</label>
  68. <div class="input-group date" id="FirstDate" data-target-input="nearest">
  69. @Html.TextBoxFor(model => model.FromDate, new { @class = "form-control datetimepicker-input", @data_target = "#FirstDate" })
  70. <div class="input-group-append" data-target="#FirstDate" data-toggle="datetimepicker">
  71. <div class="input-group-text"><i class="fa fa-calendar"></i></div>
  72. </div>
  73. </div>
  74. </div>
  75. </div>
  76. <div class="col-md-2">
  77. <div class="form-group">
  78. <label>To Date</label>
  79. <div class="input-group date" id="SecondDate" data-target-input="nearest">
  80. @Html.TextBoxFor(model => model.ToDate, new { @class = "form-control datetimepicker-input", @data_target = "#SecondDate" })
  81. <div class="input-group-append" data-target="#SecondDate" data-toggle="datetimepicker">
  82. <div class="input-group-text"><i class="fa fa-calendar"></i></div>
  83. </div>
  84. </div>
  85. </div>
  86. </div>
  87. </div>
  88. </div>
  89. </div>
  90. </div>
  91. }
  92. </div>
  93. </div>
  94. <!-- /.container-fluid -->
  95. <table class="table table-bordered table-striped table-hover text-nowrap text-sm" id="Demogrid"></table>
  96. <div class="container-fluid" id="pager"></div>
  97. </section>

here is my JS part where i handled onkeyup event:

  1. function LiveSearch(type, value) {
  2. var searchType = type;
  3. var searchValue = value;
  4. if (value == "" || value == null) {
  5. $("#Demogrid").jqGrid('setGridParam', { postData: { Type: searchType, SearchValue: searchValue } }).trigger('reloadGrid');
  6. return true;
  7. }
  8. else {
  9. $("#Demogrid").jqGrid({
  10. url: '/HRM/LRLiveSearch/LiveSearch',
  11. datatype: "json",
  12. mtype: 'Get',
  13. //table header name
  14. colNames: ['ProjectName', 'PlotName', 'TotalLandArea', 'DeedId', 'DeedDate', 'RentFeeType', 'RentFee', 'ClientName', 'ClientAddress', 'ClientContactNo', 'EffectiveDate'],
  15. //colModel takes the data from controller and binds to grid
  16. colModel: [
  17. { name: "ProjectName" },
  18. { name: "PlotName" },
  19. { name: "TotalLandArea" },
  20. { name: "DeedId" },
  21. { name: "DeedDate" },
  22. { name: "RentFeeType" },
  23. { name: "RentFee" },
  24. { name: "ClientName" },
  25. { name: "ClientAddress" },
  26. { name: "ClientContactNo" },
  27. { name: "EffectiveDate" }
  28. ],
  29. height: '100%',
  30. viewrecords: true,
  31. caption: 'Deed Info',
  32. emptyrecords: 'No records',
  33. rowNum: 10,
  34. pager: jQuery('#pager'),
  35. rowList: [10, 20, 30, 40],
  36. jsonReader:
  37. {
  38. root: "rows",
  39. page: "page",
  40. total: "total",
  41. records: "records",
  42. repeat
  43. <details>
  44. <summary>英文:</summary>
  45. I needed to create a search page where various types of text, dropdown, date field will be there. i added onkeyup function to every text field so that whenever i put any text or number a grid will appear with subgrid. The issue i am facing is if i give input for the first time then the grid appear with correct data. if i clear that field then the grid is reloading also but if i input again in that field or any other text field then the js is not sending request to the action method with updated post value.
  46. Here is my View Part:

<section class="content">
<div class="container-fluid">
<!-- SELECT2 EXAMPLE -->
<!-- SELECT2 EXAMPLE -->
<div class="card card-info">
<div class="card-header">
<h3 class="card-title">Search Criteria</h3>

  1. &lt;div class=&quot;card-tools&quot;&gt;
  2. &lt;button type=&quot;button&quot; class=&quot;btn btn-tool&quot; data-card-widget=&quot;collapse&quot;&gt;
  3. &lt;i class=&quot;fas fa-minus&quot;&gt;&lt;/i&gt;
  4. &lt;/button&gt;
  5. &lt;/div&gt;
  6. &lt;/div&gt;
  7. &lt;!-- /.card-header --&gt;
  8. @using (Html.BeginForm(&quot;SearchReport&quot;, &quot;LRLiveSearch&quot;, FormMethod.Post))
  9. {
  10. &lt;div class=&quot;card-body&quot;&gt;
  11. &lt;div class=&quot;row&quot;&gt;
  12. &lt;div class=&quot;col-md-12&quot; style=&quot;line-height:1.50px;&quot;&gt;
  13. &lt;div class=&quot;row&quot;&gt;
  14. &lt;div class=&quot;col-md-2&quot;&gt;
  15. &lt;div class=&quot;form-group&quot;&gt;
  16. &lt;label&gt;Deed No&lt;/label&gt;
  17. @Html.TextBoxFor(model =&gt; model.DeedNo, new { @class = &quot;form-control&quot;, onkeyup = &quot;LiveSearch(&#39;DN&#39;, this.value)&quot; })
  18. &lt;/div&gt;
  19. &lt;/div&gt;
  20. &lt;div class=&quot;col-md-2&quot;&gt;
  21. &lt;div class=&quot;form-group&quot;&gt;
  22. &lt;label&gt;Deed Identity&lt;/label&gt;
  23. @Html.TextBoxFor(model =&gt; model.DeedId, new { @class = &quot;form-control&quot;, onkeyup = &quot;LiveSearch(&#39;DI&#39;, this.value)&quot; })
  24. &lt;/div&gt;
  25. &lt;/div&gt;
  26. &lt;div class=&quot;col-md-2&quot;&gt;
  27. &lt;div class=&quot;form-group&quot;&gt;
  28. &lt;label&gt;Client Name&lt;/label&gt;
  29. @Html.TextBoxFor(model =&gt; model.ClientName, new { @class = &quot;form-control&quot;, onkeyup = &quot;LiveSearch(&#39;CN&#39;, this.value)&quot; })
  30. &lt;/div&gt;
  31. &lt;/div&gt;
  32. &lt;div class=&quot;col-md-2&quot;&gt;
  33. &lt;div class=&quot;form-group&quot;&gt;
  34. &lt;label&gt;Client Contact Number&lt;/label&gt;
  35. @Html.TextBoxFor(model =&gt; model.ClientPhoneNumber, new { @class = &quot;form-control&quot;, onkeyup = &quot;LiveSearch(&#39;CP&#39;, this.value)&quot; })
  36. &lt;/div&gt;
  37. &lt;/div&gt;
  38. &lt;div class=&quot;col-md-2&quot;&gt;
  39. &lt;div class=&quot;form-group&quot;&gt;
  40. &lt;label&gt;MR No&lt;/label&gt;
  41. @Html.TextBoxFor(model =&gt; model.MRNo, new { @class = &quot;form-control&quot;, onkeyup = &quot;LiveSearch(&#39;MR&#39;, this.value)&quot; })
  42. &lt;/div&gt;
  43. &lt;/div&gt;
  44. &lt;div class=&quot;col-md-2&quot;&gt;
  45. &lt;div class=&quot;form-group&quot;&gt;
  46. &lt;label&gt;Cheque No&lt;/label&gt;
  47. @Html.TextBoxFor(model =&gt; model.ChequeNo, new { @class = &quot;form-control&quot;, onkeyup = &quot;LiveSearch(&#39;CQN&#39;, this.value)&quot; })
  48. &lt;/div&gt;
  49. &lt;/div&gt;
  50. &lt;/div&gt;
  51. &lt;div class=&quot;row&quot;&gt;
  52. &lt;div class=&quot;col-md-2&quot;&gt;
  53. &lt;div class=&quot;form-group&quot;&gt;
  54. &lt;label&gt;Collection Type&lt;/label&gt;
  55. @Html.DropDownListFor(model =&gt; model.CollectionType, Model.CollectionTypeList, new { @class = &quot;form-control&quot; })
  56. &lt;/div&gt;
  57. &lt;/div&gt;
  58. &lt;div class=&quot;col-md-2&quot;&gt;
  59. &lt;div class=&quot;form-group&quot;&gt;
  60. &lt;label&gt;From Date&lt;/label&gt;
  61. &lt;div class=&quot;input-group date&quot; id=&quot;FirstDate&quot; data-target-input=&quot;nearest&quot;&gt;
  62. @Html.TextBoxFor(model =&gt; model.FromDate, new { @class = &quot;form-control datetimepicker-input&quot;, @data_target = &quot;#FirstDate&quot; })
  63. &lt;div class=&quot;input-group-append&quot; data-target=&quot;#FirstDate&quot; data-toggle=&quot;datetimepicker&quot;&gt;
  64. &lt;div class=&quot;input-group-text&quot;&gt;&lt;i class=&quot;fa fa-calendar&quot;&gt;&lt;/i&gt;&lt;/div&gt;
  65. &lt;/div&gt;
  66. &lt;/div&gt;
  67. &lt;/div&gt;
  68. &lt;/div&gt;
  69. &lt;div class=&quot;col-md-2&quot;&gt;
  70. &lt;div class=&quot;form-group&quot;&gt;
  71. &lt;label&gt;To Date&lt;/label&gt;
  72. &lt;div class=&quot;input-group date&quot; id=&quot;SecondDate&quot; data-target-input=&quot;nearest&quot;&gt;
  73. @Html.TextBoxFor(model =&gt; model.ToDate, new { @class = &quot;form-control datetimepicker-input&quot;, @data_target = &quot;#SecondDate&quot; })
  74. &lt;div class=&quot;input-group-append&quot; data-target=&quot;#SecondDate&quot; data-toggle=&quot;datetimepicker&quot;&gt;
  75. &lt;div class=&quot;input-group-text&quot;&gt;&lt;i class=&quot;fa fa-calendar&quot;&gt;&lt;/i&gt;&lt;/div&gt;
  76. &lt;/div&gt;
  77. &lt;/div&gt;
  78. &lt;/div&gt;
  79. &lt;/div&gt;
  80. @*&lt;div class=&quot;col-md-1&quot;&gt;
  81. &lt;div class=&quot;form-group&quot;&gt;
  82. &lt;center&gt;
  83. &lt;button id=&quot;btnLRSearch&quot; formaction=&quot;SearchList&quot; class=&quot;btn btn-md btn-primary&quot; style=&quot;margin-top:.80rem&quot; type=&quot;button&quot;&gt;Search&lt;/button&gt;
  84. &lt;/center&gt;
  85. &lt;/div&gt;
  86. &lt;/div&gt;
  87. &lt;div class=&quot;col-md-1&quot;&gt;
  88. &lt;div class=&quot;form-group&quot;&gt;
  89. &lt;center&gt;
  90. &lt;button id=&quot;btnPrint&quot; formaction=&quot;SearchReport&quot; class=&quot;btn btn-md btn-warning&quot; style=&quot;margin-top:.80rem&quot; type=&quot;submit&quot;&gt;Report&lt;/button&gt;
  91. &lt;/center&gt;
  92. &lt;/div&gt;
  93. &lt;/div&gt;*@
  94. &lt;/div&gt;
  95. &lt;/div&gt;
  96. &lt;/div&gt;
  97. &lt;/div&gt;
  98. }
  99. &lt;/div&gt;
  100. &lt;/div&gt;
  101. &lt;!-- /.container-fluid --&gt;
  102. &lt;table class=&quot;table table-bordered table-striped table-hover text-nowrap text-sm&quot; id=&quot;Demogrid&quot;&gt;&lt;/table&gt;
  103. &lt;div class=&quot;container-fluid&quot; id=&quot;pager&quot;&gt;&lt;/div&gt;

</section>

  1. here is my JS part where i handled onkeyup event:

function LiveSearch(type, value) {
var searchType = type;
var searchValue = value;
if (value == "" || value == null) {
$("#Demogrid").jqGrid('setGridParam', { postData: { Type: searchType, SearchValue: searchValue } }).trigger('reloadGrid');
return true;
}
else {
$("#Demogrid").jqGrid({
url: '/HRM/LRLiveSearch/LiveSearch',
datatype: "json",
mtype: 'Get',
//table header name
colNames: ['ProjectName', 'PlotName', 'TotalLandArea', 'DeedId', 'DeedDate', 'RentFeeType', 'RentFee', 'ClientName', 'ClientAddress', 'ClientContactNo', 'EffectiveDate'],
//colModel takes the data from controller and binds to grid
colModel: [
{ name: "ProjectName" },
{ name: "PlotName" },
{ name: "TotalLandArea" },
{ name: "DeedId" },
{ name: "DeedDate" },
{ name: "RentFeeType" },
{ name: "RentFee" },
{ name: "ClientName" },
{ name: "ClientAddress" },
{ name: "ClientContactNo" },
{ name: "EffectiveDate" }
],
height: '100%',
viewrecords: true,
caption: 'Deed Info',
emptyrecords: 'No records',
rowNum: 10,
pager: jQuery('#pager'),
rowList: [10, 20, 30, 40],
jsonReader:
{
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
Id: "0"
},
postData: {
Type: searchType,
SearchValue: searchValue
},
autowidth: true,
subGrid: true,
subGridRowExpanded: function (subgridId, rowId) {
// create the subgrid HTML here
var subgridTableId = subgridId + "_t";
$("#" + subgridId).html("<table id='" + subgridTableId + "'></table>");
// get the data for the parent row
var parentRowData = $("#Demogrid").jqGrid("getRowData", rowId);
// retrieve the primary key value of the parent row
var parentId = parentRowData.DeedId;
$("#" + subgridTableId).jqGrid({
// configure the subgrid
url: '/HRM/LRLiveSearch/LiveSearch',
datatype: "json",
mtype: 'Get',
//table header name
colNames: ['CollectionId', 'CollectionDate', 'MRIdentity', 'MRNo', 'MRDate', 'MRType', 'CollectionType', 'ChequeNo', 'BankName'],
//colModel takes the data from controller and binds to grid
colModel: [
{ name: "CollectionId", hidden: true },
{ name: "CollectionDate" },
{ name: "MRIdentity" },
{ name: "MRNo" },
{ name: "MRDate" },
{ name: "MRType" },
{ name: "CollectionType" },
{ name: "ChequeNo" },
{ name: "BankName" }
],
height: '100%',

  1. viewrecords: true,
  2. caption: &#39;Collection Details&#39;,
  3. emptyrecords: &#39;No records&#39;,
  4. rowNum: 10,
  5. jsonReader: {
  6. repeatitems: false
  7. },
  8. postData: {
  9. Type: searchType,
  10. SearchValue: searchValue,
  11. DeedId: parentId
  12. },
  13. autowidth: true
  14. });
  15. },
  16. }).navGrid(&#39;#pager&#39;,
  17. {
  18. edit: true,
  19. add: true,
  20. del: true,
  21. search: true,
  22. refresh: true,
  23. closeAfterSearch: true
  24. });
  25. }
  26. }
  1. and it is my action method:

public JsonResult LiveSearch(string sord, int page, int rows, string searchString, string Type, string SearchValue, string DeedId)
{
if(SearchValue == "")
{
SearchValue = "$";
}
var query = iLRSearchRepository.LiveSearchFilter(Type, SearchValue);
if (DeedId == null)
{
//#2 Setting Paging
int pageIndex = Convert.ToInt32(page) - 1;
int pageSize = rows;
//#3 Linq Query to Get Data

  1. var Results = query.Select(
  2. x =&gt; new
  3. {
  4. ProjectName = x.ProjectName,
  5. PlotName = x.PlotName,
  6. TotalLandArea = x.TotalLandArea,
  7. DeedId = x.DeedId,
  8. DeedDate = x.DeedDate.ToString(&quot;dd/MM/yyyy&quot;),
  9. RentFeeType = x.RentFeeType,
  10. RentFee = x.RentFee,
  11. ClientName = x.ClientName,
  12. ClientAddress = x.ClientsAddress,
  13. ClientContactNo = x.ClientsContactNo,
  14. EffectiveDate = x.ActivateDate.ToString(&quot;dd/MM/yyyy&quot;)
  15. }).Distinct();
  16. //#4 Get Total Row Count
  17. int totalRecords = Results.Count();
  18. var totalPages = (int)Math.Ceiling((float)totalRecords / (float)rows);
  19. //#5 Setting Sorting
  20. if (sord.ToUpper() == &quot;DESC&quot;)
  21. {
  22. Results = Results.OrderByDescending(s =&gt; s.DeedId);
  23. Results = Results.Skip(pageIndex * pageSize).Take(pageSize);
  24. }
  25. else
  26. {
  27. Results = Results.OrderBy(s =&gt; s.DeedId);
  28. Results = Results.Skip(pageIndex * pageSize).Take(pageSize);
  29. }
  30. //#6 Setting Search
  31. if (!string.IsNullOrEmpty(searchString))
  32. {
  33. Results = Results.Where(m =&gt; m.DeedId == searchString);
  34. }
  35. //#7 Sending Json Object to View.
  36. var jsonData = new
  37. {
  38. total = totalPages,
  39. page,
  40. records = totalRecords,
  41. rows = Results
  42. };
  43. return Json(jsonData, JsonRequestBehavior.AllowGet);
  44. }
  45. else
  46. {
  47. var Results = query.Where(x =&gt; x.DeedId == DeedId).Select(
  48. x =&gt; new
  49. {
  50. CollectionId = x.CollectionId,
  51. CollectionDate = x.CollectionDate?.ToString(&quot;dd/MM/yyyy&quot;),
  52. MRIdentity = x.MRIdentity,
  53. MRNo = x.MRNo,
  54. MRDate = x.MRDate?.ToString(&quot;dd/MM/yyyy&quot;),
  55. MRType = x.MRType,
  56. CollectionType = x.CollectionType,
  57. ChequeNo = x.ChequeNo,
  58. BankName = x.BankName,
  59. });
  60. var jsonData = new
  61. {
  62. rows = Results
  63. };
  64. return Json(jsonData, JsonRequestBehavior.AllowGet);
  65. }
  66. //model.landRent_View_SearchInfos = query;
  67. //return View(&quot;_LandRentInfoList&quot;, model);
  68. }
  1. </details>
  2. # 答案1
  3. **得分**: 0
  4. 使用您的代码,每次进行搜索时都尝试创建jqGrid,这显然是不允许的,因为网格已经创建。
  5. 如果值为空或为null:
  6. ```javascript
  7. if (value == "" || value == null) {
  8. $("#Demogrid").jqGrid('setGridParam', { postData: { Type: searchType, SearchValue: searchValue } }).trigger('reloadGrid');
  9. return true;
  10. }

否则:

  1. else {
  2. $("#Demogrid").jqGrid({}...)
  3. }

为了解决这个问题,首先创建网格,然后在值更改时重新加载:

  1. $("#Demogrid").jqGrid({
  2. url: '/HRM/LRLiveSearch/LiveSearch',
  3. datatype: "json",
  4. mtype: 'Get',
  5. //表头名称
  6. // ...
  7. });
  8. function LiveSearch(type, value) {
  9. var searchType = type;
  10. var searchValue = value;
  11. $("#Demogrid").jqGrid('setGridParam', { postData: { Type: searchType, SearchValue: searchValue } }).trigger('reloadGrid');
  12. return true;
  13. }

希望这有所帮助。最初,您可以设置值(postData),以便网格返回空数据,或者使用空的本地数据创建网格(datatype: local),然后将数据类型更改为json。

英文:

With your code you every time try create jqGrid when you do a search, which of course is not allowed since the grid is already created.

  1. if (value == &quot;&quot; || value == null) {
  2. $(&quot;#Demogrid&quot;).jqGrid(&#39;setGridParam&#39;, { postData: { Type: searchType, SearchValue: searchValue } }).trigger(&#39;reloadGrid&#39;);
  3. return true;
  4. }
  5. else {
  6. $(&quot;#Demogrid&quot;).jqGrid({}...)
  7. }

To solve the problem first create the grid and the do a reload when the value changes

  1. $(&quot;#Demogrid&quot;).jqGrid({
  2. url: &#39;/HRM/LRLiveSearch/LiveSearch&#39;,
  3. datatype: &quot;json&quot;,
  4. mtype: &#39;Get&#39;,
  5. //table header name
  6. ...
  7. });
  8. function LiveSearch(type, value) {
  9. var searchType = type;
  10. var searchValue = value;
  11. $(&quot;#Demogrid&quot;).jqGrid(&#39;setGridParam&#39;, { postData: { Type: searchType, SearchValue: searchValue } }).trigger(&#39;reloadGrid&#39;);
  12. return true;
  13. }

Hope this helps.

Initially you can set values (postData) so that the grid return empty data or create the grid with empty local data (datatype : local) and then change the datatype to json.

huangapple
  • 本文由 发表于 2023年1月9日 13:06:22
  • 转载请务必保留本文链接:https://go.coder-hub.com/75053382.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定