行添加到使用JavaScript一个gridview [英] Add rows to a gridview using JavaScript
问题描述
有没有办法将行添加到使用JavaScript一个gridview？现在我有GridView控件的onclick方法设置为sortTrGrid（gridviewname）与sortTrGrid方法如下结构。我可以以适当的顺序设置表中获取行，但没有在网页上的变化。
函数sortTrGrid（发件人）{
无功表=的document.getElementById（sender.id）;
VAR行=新的Array（table.rows）; 对于（VAR I = 0; I＆LT; table.rows;我++）{
行[I] = table.rows [I]
} 为（变量I = table.rows;我大于0;我 - ）{
table.deleteRow（的document.getElementById（I））;
table.rows [I] =行[I]
} } //结束GridSort
假设你的页面包含了所有来自您的数据源（无分页）的行和您要订购的客户端上的GridView的行来提高性能（没有击中服务器），你可以做到以下几点：
（这code可让排序数字和文本，并在按升序排序，点击GridView的头时，降模式）
如果您要检查完整的工作示例，<一个href=\"https://github.com/jupaol/SO-Answers/blob/master/Visual%20Studio%202012/src/SO/WebForms/WebForms_1/Topics/JQuery/SortGridViewRows.aspx\"相对=nofollow>我刚刚上传到我的GitHub网站
截图
无序
首先点击 - ASC为了
第二次点击 - 倒序
绑定在GridView
＆LT; ASP：使用LinqDataSource =服务器ID =LDS
ContextTypeName =WebForms_1.DataAccess.PubsDataContext
表名=工作
EntityTypeName =WebForms_1.DataAccess.jobs＆GT;
＆LT; / ASP：使用LinqDataSource＆GT;
＆LT; ASP：GridView控件=服务器ID =GV的DataSourceID =IN的DataKeyNames =JOB_ID＆GT;＆LT; / ASP：GridView的＆GT;
的jQuery code
＆LT;脚本类型=文/ JavaScript的＆GT;
$（函数（）{
（表[= GV $ ID]）变量$ GV = $;
变量$标题= $（日，$ GV）;
变量$行= $（＆GT;＆TBODY GT; TR：没有（：有（表中，日）），$ GV）; $ rows.addClass（网行）;
$ headers.addClass（网格报头）; $ headers.toggle（函数（五）{
sortGrid（$（本），0）;
}，功能（E）{
sortGrid（$（本），1）;
}）; 功能sortGrid（行方向）{
。VAR colIndex = $（行）.parent（）儿童（）指数（$（行））;
变量$ rowsArray = $ .makeArray（$行）;
变量$ sortedArray = $ rowsArray.sort（函数（O，N）{
变量$ currentCell = $（TD：第n个孩子（+（colIndex + 1）+），$（O））;
变量$ nextCell = $（TD：第n个孩子（+（colIndex + 1）+），$（N））;
变种CurrentValue的= parseFloat（$ currentCell.text（））？ parseFloat（$ currentCell.text（））：$ currentCell.text（）;
变种nextValue = parseFloat（$ nextCell.text（））？ parseFloat（$ nextCell.text（））：$ nextCell.text（）; 如果（方向== 0）{
返回CurrentValue的＆LT; nextValue？ -1：1;
}
其他{
返回CurrentValue的＆GT; nextValue？ -1：1;
}
}）; $（＆GT;＆TBODY GT; TR：没有（：有（表中，日）），$ GV）一个.remove（）;
$（TBODY，$ GV）.append（$ sortedArray）;
}
}）;
＆LT; / SCRIPT＆GT;
Is there a way to add rows to a gridview using JavaScript? Right now I have the GridView's onclick method set to sortTrGrid(gridviewname) with the sortTrGrid method structured as below. I can get the rows in the tables set in the proper order, however nothing changes on the web page.
function sortTrGrid(sender) {
var table = document.getElementById(sender.id);
var rows = new Array(table.rows);
for (var i = 0; i < table.rows; i++) {
rows[i] = table.rows[i];
}
for (var i = table.rows; i > 0; i--) {
table.deleteRow(document.getElementById(i));
table.rows[i] = rows[i];
}
}//end GridSort
Assuming your page contains all the rows from your data source (no-paging) and you want to order the GridView rows on the client to increase performance (without hitting the server), you can do the following:
(This code allows sorting numbers and text and sorting in ascending and descending mode when clicking the GridView headers)
If you want to check the full working example, I just uploaded to my GitHub site
Screenshot
Unordered
First click - ASC order
Second click - DESC order
Binding the GridView
<asp:LinqDataSource runat="server" ID="lds"
ContextTypeName="WebForms_1.DataAccess.PubsDataContext"
TableName="jobs"
EntityTypeName="WebForms_1.DataAccess.jobs">
</asp:LinqDataSource>
<asp:GridView runat="server" ID="gv" DataSourceID="lds" DataKeyNames="job_id">
</asp:GridView>
jQuery code
<script type="text/javascript">
$(function () {
var $gv = $("table[id$=gv]");
var $headers = $("th", $gv);
var $rows = $("> tbody > tr:not(:has(table, th))", $gv);
$rows.addClass("grid-rows");
$headers.addClass("grid-headers");
$headers.toggle(function (e) {
sortGrid($(this), 0);
}, function (e) {
sortGrid($(this), 1);
});
function sortGrid(row, direction) {
var colIndex = $(row).parent().children().index($(row));
var $rowsArray = $.makeArray($rows);
var $sortedArray = $rowsArray.sort(function (o, n) {
var $currentCell = $("td:nth-child(" + (colIndex + 1) + ")", $(o));
var $nextCell = $("td:nth-child(" + (colIndex + 1) + ")", $(n));
var currentValue = parseFloat($currentCell.text()) ? parseFloat($currentCell.text()) : $currentCell.text();
var nextValue = parseFloat($nextCell.text()) ? parseFloat($nextCell.text()) : $nextCell.text();
if (direction == 0) {
return currentValue < nextValue ? -1 : 1;
}
else {
return currentValue > nextValue ? -1 : 1;
}
});
$("> tbody > tr:not(:has(table, th))", $gv).remove();
$("tbody", $gv).append($sortedArray);
}
});
</script>
这篇关于行添加到使用JavaScript一个gridview的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
