jquery easyui datagrid 加每页合计和总合计,请教怎么来做

jquery easyui datagrid 加每页合计和总合计,请教怎么来做,第1张

这个只有从后台来处理

后台根据rows 和page两个参数返回的datatable  命名为dt

然后根据dt   clone一个datatable

datatable dt2=dtClone();

克隆出来的dt2添加两行 第一行对当前页进行合计

DataRow dr1(每页合计)=dt2createRow();

dr1[0]='合计';

dr1["num1"]=dtCompute("sum(num1)", "");

dt2如法炮制添加一行  该行数据时对所有的数据进行统计

然后把上述两行插入到dt2

dt2RowsInsertAt(dr2,0);

dt2RowsInsertAt(dr2,1);

最后 处理 datagrid的json 这里需要用到的footer对象

json = "{\"total\":dt(总)RowsCount,\"rows\":" + JsonConvertSerializeObject(dt)+ ",\"footer\":" + JsonConvertSerializeObject(dt2) + "}";

大体就这个思路…… 很简单  datagrid footer  数据源格式 可以参考EasyUI demo里面的代码

jQuery 遍历的 eq() 方法将匹配元素集缩减值指定 index 上的一个,index表示元素的位置(最小为 0)。所以获取Table第 i 行第 j 列的内容可用如下代码

$("table")find("tr")eq(i-1)find("td")eq(j-1)text(); // 注意-1是因为index从0开始计数

实例演示

创建Html元素

<div class="box">

<span>填写行列数,点击按钮后获取对应位置的数值:</span><br>

<div class="content">

<table>

<tr><td>1</td><td>2</td><td>3</td></tr>

<tr><td>4</td><td>5</td><td>6</td></tr>

<tr><td>7</td><td>8</td><td>9</td></tr>

</table>

</div>

第<input type="text" name="row">行,第<input type="text" name="col">列<input type="button" class="btn" value="确定">

</div>

添加css样式

divbox{width:300px;height:250px;padding:10px 20px;border:4px dashed #ccc;}

divbox>span{color:#999;font-style:italic;}

divcontent{width:250px;height:100px;margin:10px 0;padding:5px 20px;border:2px solid #ff6666;}

input[type='text']{width:35px;height:30px;border:1px solid #99ccff;}

input[type='button']{width:100px;height:30px;margin:10px;border:2px solid #ebbcbe;}

selected{background:#99ccff;}

table{border-collapse:collapse;}

td{padding:5px 10px;border:1px solid green;}

编写jquery代码

$(function(){

$("input:button")click(function() {

row = $("input[name='row']")val() - 1;

col = $("input[name='col']")val() - 1;

val = $("table")find("tr")eq(row)find("td")eq(col)text();

alert(val);

});

})

观察显示效果

<table class="table table-hover" id="test123">

<tr>

<th width="45">选择</th>

<th width="100">驾校名称</th>

<th width="100">合作驾校名称</th>

<th width="100">申请时间</th>

<th width="100">申请状态</th>

<th width="100"> *** 作</th>

</tr>

<tr>

<td><input type="checkbox" name="id" value="1" /></td>

<td>中大驾校</td>

<td>潇湘驾校</td>

<td>2016-04-15 14:40:20</td>

<td class="tablestate">未处理</td>

<td><a class="change button border-blue button-little update" href="#">修改申请状态</a></td>

</tr>

<tr>

<td><input type="checkbox" name="id" value="1" /></td>

<td>中大驾校</td>

<td>潇湘驾校</td>

<td>2016-04-15 14:40:20</td>

<td class="tablestate">未处理</td>

<td><a class="change button border-blue button-little update" href="#">修改申请状态</a></td>

</tr>

</table>

扩展资料:

遍历同胞:

siblings():被选中时找到自己的兄弟姐妹,写法有siblings(所有的兄弟姐妹)和siblings(“同级的兄弟姐妹”)。

next():被选中时找到自己的下级,写法有   nextAll(找到所有的下级)和next(“找到下一个元素”)和nextuntil("被选中的元素的范围内的元素")。

prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似,只不过方向相反:它们返回的是前面的同胞元素(在 DOM 树中沿着同胞元素向后遍历,而不是向前)。

first():返回被选中的第一元素  ,写法 $("div p")first()css("样式") 。

last():被选中的最后一个元素,写法 $("div p")last()css(”样式“) 。

eq():返回被选中元素中有索引的元素,索引号,是从0开始不是从1开始比如treq(0)id ==dataeq[i-1]id 或者 tr[0]id = data[i-1]id。        

filter():删除真正意义上的过滤,写法  $("div ")filter("span")hide() 。

not():就是跟filter()相反的用法。

//先获取所有行

var rows=$("#tg")datagrid("getRows");

/然后遍历每一行,取出你需要的那一列对应的值(相当于间接的取了某一列的值)

column_name就是你要取值的列名/ for(var i=0;i<rowslength;i++){ var value=rows[i]column_name; alert(value); }

可以使用parent,parents,find等函数获取当前行的所有数据。

先用parent或parents找到当前行的行元素,然后在当前行循环查找列元素。最后,把找到的元素值放入数组就可以了。

function 函数名()

{

var i=$('#xmmcTable tr')size();

var j=i-1;

if(i>1)

{

var td1text=$('#xmmcTable tr')eq(j)find("td")eq(0)text();

var td2text=$('#xmmcTable tr')eq(j)find("td")eq(1)find("input ")eq(0)val();

var td3text=$('#xmmcTable tr')eq(j)find("td")eq(2)find("input ")eq(0)val();

var td4text=$('#xmmcTable tr')eq(j)find("td")eq(3)find("<select>")eq(0)val();

}

不知道你要干嘛不过这样应该能筛选出最后一条的信息。如果你要筛选全部就来个循环

你要提交就写在form 里面呗给你的数据定义一个命名ID格式到后台根据直接根据条数一个循环request不就获取到了

以上就是关于jquery easyui datagrid 加每页合计和总合计,请教怎么来做全部的内容,包括:jquery easyui datagrid 加每页合计和总合计,请教怎么来做、如何用Jquery获取Table指定行中指定列的数值、jQuery怎么遍历表格,获取每一列的值等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9376957.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-27
下一篇 2023-04-27

发表评论

登录后才能评论

评论列表(0条)

保存