DHTMLX - 分页后,点击网格重定向到第 1 页
DHTMLX - After pagination, Click on Grid redirects to Page 1
我正在使用 DHTMLX Pro 并使用这些配置呈现 table。分页工作正常。分页后,当我单击网格中的任何行或任何单元格时,它会自动重定向到第 1 页。
例如:
当我在第 2 页时,当我单击第 2 页中的网格行时,它会返回到第 1 页。
grid.js
var per_page = 50;
var $spinner_el = $("#spinnerDiv");
feedgrid = new dhtmlXGridObject('grid-region');
feedgrid.setImagePath('../../../../static/styles/vendor/dhtmlx/imgs/');
feedgrid.setSkin("dhx_web");
feedgrid.setHeader(["ID","Name","date"]);
feedgrid.setColumnIds("id,name,createdDate");
feedgrid.setColTypes("txt,txt,txt");
feedgrid.enableAutoHeight(true);
feedgrid.enableAutoWidth(true);
feedgrid.setEditable(false);
feedgrid.enablePaging(true, per_page, per_page, "pagingArea", true, "infoArea");
feedgrid.setPagingSkin("toolbar", "dhx_web");
feedgrid.init();
feedgrid.load("/getdata", "js");
feedgrid.entBox.onselectstart = function () {
return true;
};
feedgrid.attachEvent("onXLS", function () {
spinUtil.on($spinner_el);
});
feedgrid.attachEvent("onXLE", function () {
spinUtil.off($spinner_el);
resizeGrid();
});
feedgrid.attachEvent("onRowInserted", function (rId) {
feedgrid.adjustColumnSize(0);
feedgrid.adjustColumnSize(1);
feedgrid.adjustColumnSize(2);
});
feedgrid.attachEvent("onResizeEnd", function (cInd, cWidth, obj) {
resizeGrid();
});
feedgrid.attachEvent("onPageChanged", function (ind, fInd, lInd) {
resizeGrid();
});
html
<div id='grid-region'></div>
<div class="loading-image" id="table-ajax-loader"></div>
<div class="paginate-head">
<div id="pagingArea"></div>
<div id="infoArea"></div>
</div>
不确定哪里出了问题。
我不得不覆盖 onBeforeSelect
DHTMLX 事件以禁用重定向到第 1 页,
ingestionGrid.attachEvent("onBeforeSelect", function(new_row,old_row,new_col_index){
//alert(new_row);
});
我知道这个 post 很旧,但我对 DHTMLXGrid 的分页有同样的问题。本来以为是库的bug,今天早上发现了。
当然,如果您的数据 xml 节点中有一些属性,例如 id 或类似的东西,必须对这些属性的值进行排序并在您从网格发出的每个异步请求中顺序排列。在其他情况下,网格会生气(开发人员也会生气)。如果不能排序,则从节点中删除所有属性。
例如:
假设我 return 这个 xml 从服务器端到网格:
<?xml version="1.0" encoding="ISO-8859-15"?>
<rows pos="0" total_count="40">
<row id="1">
<cell>...</cell>
<cell>...</cell>
...
<cell>...</cell>
</row>
<row id="2">
<cell>...</cell>
<cell>...</cell>
...
<cell>...</cell>
</row>
...
<row id="n">
<cell>...</cell>
<cell>...</cell>
...
<cell>...</cell>
</row>
</rows>
如果在下一个异步请求(分页)中重复相同的 id 属性编号(从 1 到 n),当您 select 网格中的一行时,网格将 return 到第一页('onRowSelect' 事件将触发 'onBeforePageChanged' 事件)。
好的方法是在服务器端保留一个参数,该参数存储页面的第一个位置,然后使用该值构建 xml。您可以使用这些方法从 javascript 访问此数据:
position_start = (grid.currentPage - 1) * grid.rowsBufferOutSize;
然后在构建响应 xml.
时在每次迭代中增加 'id' 属性的值
因此请注意上一个示例中属性 id 的值(每个请求中包含 15 个结果的块):
第一个异步请求:
<?xml version="1.0" encoding="ISO-8859-15"?>
<rows pos="0" total_count="40">
<row id="1">
<cell>...</cell>
<cell>...</cell>
...
<cell>...</cell>
</row>
<row id="2">
<cell>...</cell>
<cell>...</cell>
...
<cell>...</cell>
</row>
...
<row id="15">
<cell>...</cell>
<cell>...</cell>
...
<cell>...</cell>
</row>
</rows>
在下一个异步请求中:
<?xml version="1.0" encoding="ISO-8859-15"?>
<rows pos="0" total_count="40">
<row id="16">
<cell>...</cell>
<cell>...</cell>
...
<cell>...</cell>
</row>
<row id="17">
<cell>...</cell>
<cell>...</cell>
...
<cell>...</cell>
</row>
...
<row id="30">
<cell>...</cell>
<cell>...</cell>
...
<cell>...</cell>
</row>
</rows>
分页结束后。
希望这能提前避免任何头痛。
此致
我正在使用 DHTMLX Pro 并使用这些配置呈现 table。分页工作正常。分页后,当我单击网格中的任何行或任何单元格时,它会自动重定向到第 1 页。
例如: 当我在第 2 页时,当我单击第 2 页中的网格行时,它会返回到第 1 页。
grid.js
var per_page = 50;
var $spinner_el = $("#spinnerDiv");
feedgrid = new dhtmlXGridObject('grid-region');
feedgrid.setImagePath('../../../../static/styles/vendor/dhtmlx/imgs/');
feedgrid.setSkin("dhx_web");
feedgrid.setHeader(["ID","Name","date"]);
feedgrid.setColumnIds("id,name,createdDate");
feedgrid.setColTypes("txt,txt,txt");
feedgrid.enableAutoHeight(true);
feedgrid.enableAutoWidth(true);
feedgrid.setEditable(false);
feedgrid.enablePaging(true, per_page, per_page, "pagingArea", true, "infoArea");
feedgrid.setPagingSkin("toolbar", "dhx_web");
feedgrid.init();
feedgrid.load("/getdata", "js");
feedgrid.entBox.onselectstart = function () {
return true;
};
feedgrid.attachEvent("onXLS", function () {
spinUtil.on($spinner_el);
});
feedgrid.attachEvent("onXLE", function () {
spinUtil.off($spinner_el);
resizeGrid();
});
feedgrid.attachEvent("onRowInserted", function (rId) {
feedgrid.adjustColumnSize(0);
feedgrid.adjustColumnSize(1);
feedgrid.adjustColumnSize(2);
});
feedgrid.attachEvent("onResizeEnd", function (cInd, cWidth, obj) {
resizeGrid();
});
feedgrid.attachEvent("onPageChanged", function (ind, fInd, lInd) {
resizeGrid();
});
html
<div id='grid-region'></div>
<div class="loading-image" id="table-ajax-loader"></div>
<div class="paginate-head">
<div id="pagingArea"></div>
<div id="infoArea"></div>
</div>
不确定哪里出了问题。
我不得不覆盖 onBeforeSelect
DHTMLX 事件以禁用重定向到第 1 页,
ingestionGrid.attachEvent("onBeforeSelect", function(new_row,old_row,new_col_index){
//alert(new_row);
});
我知道这个 post 很旧,但我对 DHTMLXGrid 的分页有同样的问题。本来以为是库的bug,今天早上发现了。
当然,如果您的数据 xml 节点中有一些属性,例如 id 或类似的东西,必须对这些属性的值进行排序并在您从网格发出的每个异步请求中顺序排列。在其他情况下,网格会生气(开发人员也会生气)。如果不能排序,则从节点中删除所有属性。
例如:
假设我 return 这个 xml 从服务器端到网格:
<?xml version="1.0" encoding="ISO-8859-15"?>
<rows pos="0" total_count="40">
<row id="1">
<cell>...</cell>
<cell>...</cell>
...
<cell>...</cell>
</row>
<row id="2">
<cell>...</cell>
<cell>...</cell>
...
<cell>...</cell>
</row>
...
<row id="n">
<cell>...</cell>
<cell>...</cell>
...
<cell>...</cell>
</row>
</rows>
如果在下一个异步请求(分页)中重复相同的 id 属性编号(从 1 到 n),当您 select 网格中的一行时,网格将 return 到第一页('onRowSelect' 事件将触发 'onBeforePageChanged' 事件)。
好的方法是在服务器端保留一个参数,该参数存储页面的第一个位置,然后使用该值构建 xml。您可以使用这些方法从 javascript 访问此数据:
position_start = (grid.currentPage - 1) * grid.rowsBufferOutSize;
然后在构建响应 xml.
时在每次迭代中增加 'id' 属性的值因此请注意上一个示例中属性 id 的值(每个请求中包含 15 个结果的块):
第一个异步请求:
<?xml version="1.0" encoding="ISO-8859-15"?>
<rows pos="0" total_count="40">
<row id="1">
<cell>...</cell>
<cell>...</cell>
...
<cell>...</cell>
</row>
<row id="2">
<cell>...</cell>
<cell>...</cell>
...
<cell>...</cell>
</row>
...
<row id="15">
<cell>...</cell>
<cell>...</cell>
...
<cell>...</cell>
</row>
</rows>
在下一个异步请求中:
<?xml version="1.0" encoding="ISO-8859-15"?>
<rows pos="0" total_count="40">
<row id="16">
<cell>...</cell>
<cell>...</cell>
...
<cell>...</cell>
</row>
<row id="17">
<cell>...</cell>
<cell>...</cell>
...
<cell>...</cell>
</row>
...
<row id="30">
<cell>...</cell>
<cell>...</cell>
...
<cell>...</cell>
</row>
</rows>
分页结束后。
希望这能提前避免任何头痛。
此致