jqGrid中多选
原文地址;http://www.cnblogs.com/josechuanmin/archive/2013/05/19/3087138.html
在jqGrid中设置multiselect: true可以实现全选的操作,但怎么设置被选中的checkbox里面的值呢,做法如下:
jQuery("#listTable").jqGrid({
url: 'queryList.do',
datatype: 'json',
colNames: ['','编号','姓名'],
colModel: [
{
name: 'MY_ID',
index: 'MY_ID',
sortable: false,
width: '0%',
hidden:true
},
{
name: 'MY_NO',
index:'MY_NO',
sortable: false,
align:'center',
width:'10%'
},
{
name: 'NAME',
index:'NAME',
sortable: false,
align:'center',
width:'10%'
}
],
page: 1,
rowNum: 10,
rowList: [10, 20, 30],
pager: '#listPage',
multiselect: true,
sortname: 'MY_NO',
viewrecords: true,
sortorder: "desc",
jsonReader: {
repeatitems: false
},
width: "100%",
height: '100%',
gridComplete: function() {
var rowIds = jQuery("#listTable").jqGrid('getDataIDs');
for(var k=0; k<rowIds.length; k++) {
var curRowData = jQuery("#listTable").jqGrid('getRowData', rowIds[k]);
var curChk = $("#"+rowIds[k]+"").find(":checkbox");
curChk.attr('name', 'checkboxname'); //给每一个checkbox赋名字
curChk.attr('value', curRowData['MY_ID']); //给checkbox赋值
curChk.attr('title', curRowData['NAME'] ); //给checkbox赋予额外的属性值
}
}
});
加载完列表后获取被选中的checkbox的值及其属性值的做法如下:
var checkedVals = new Array();
var checkedTitles = new Array();
$(":checkbox[name=checkboxname][checked]").each(function(){
checkedVals.push($(this).val());
checkedTitles.push($(this).attr("title"));
});
for(var p=0; p<checkedVals.length; p++){
alert(checkedVals[p]);
alert(checkedTitles[p]);
}
--------------------------------------------------------------------------------------------------
让查询列表中按指定条件被默认选中或灰掉checkbox的做法如下:
jQuery("#listTable").jqGrid({
url: 'queryList.do',
datatype: 'json',
colNames: ['','编号','姓名'],
colModel: [
{
name: 'MY_ID',
index: 'MY_ID',
sortable: false,
width: '0%',
hidden:true
},
{
name: 'MY_NO',
index:'MY_NO',
sortable: false,
align:'center',
width:'10%'
},
{
name: 'NAME',
index:'NAME',
sortable: false,
align:'center',
width:'10%'
}
],
page: 1,
rowNum: 10,
rowList: [10, 20, 30],
pager: '#listPage',
multiselect: true,
multiboxonly: true,
sortname: 'MY_NO',
viewrecords: true,
sortorder: "desc",
jsonReader: {
repeatitems: false
},
width: "100%",
height: '100%',
gridComplete: function() {
var rowIds = jQuery("#listTable").jqGrid('getDataIDs');
for(var k=0; k<rowIds.length; k++) {
var curRowData = jQuery("#listTable").jqGrid('getRowData', rowIds[k]);
if(curRowData.MY_NO == '123456'){
$("#listTable").find("input[id='jqg_" + rowIds[k] +
"']").val(curRowData.MY_ID);
if(curRowData.NAME=='shihuan'){
$("#listTable").find("input[id='jqg_" + rowIds[k] +
"']").attr("checked", true);
}
}else{
$("#listTable").find("input[id='jqg_" + rowIds[k] +
"']").val(curRowData.MY_ID);
$("#listTable").find("input[id='jqg_" + rowIds[k] + "']").attr("checked",
true);
$("#listTable").find("input[id='jqg_" + rowIds[k] + "']").attr("disabled",
true);
}
}
}
onSelectAll:function(rowid, status) { //rowid 数组
var ids = jQuery("#listTable").jqGrid('getDataIDs');
for (var i=0; i<ids.length; i++) {
var cl = ids[i];
var curRowData = jQuery("#listTable").jqGrid('getRowData', cl);
var ckt = $("#listTable").find("input[id='jqg_" + cl + "']").attr("disabled");
if(ckt){
$("#listTable").find("input[id='jqg_" + cl + "']").attr("checked", true);
}
}
},
beforeSelectRow:function(rowid, e){
//alert(rowid); //rowid的值是checkbox的value值
return false;
}
});
--------------------------------------------------------------------------------------------------
jqGrid被重新载入的做法如下:
function gridReload() {
jQuery("#listTable").jqGrid('setGridParam', {
//url:'../../../com/shihuan/search.do',
//postData: transferFormElementsToObject('theForm'),
postData: {"message":msval},
page:1
}).trigger("reloadGrid");
}
jqGrid中多选的更多相关文章
- jqGrid中multiselect: true 操作checkbox
在jqGrid中设置multiselect: true可以实现全选的操作,但怎么设置被选中的checkbox里面的值呢,做法如下:jQuery("#listTable").jqGr ...
- [原创]纯JS实现网页中多选复选框checkbox和单选radio的美化效果
图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...
- jqGrid中选择的行的数据[转]
如何获取jqGrid中选择的行的数据? 下面可以获取选择一行的id,如果你选择多行,那下面的id是最后选择的行的id: var id=$(‘#gridTable’).jqGrid(‘getGridPa ...
- jqGrid中实现radiobutton的两种做法
http://blog.sina.com.cn/s/blog_4f925fc30102e27j.html jqGrid中实现radiobutton的两种做法 ------------------- ...
- JS 获取select(多选下拉)中所选值的示例代码
通过js获取select(多选下拉)中所选值,具体实现如下,有需要的朋友可以参考下,希望对大家有所帮助 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML ...
- 如何获取jqGrid中选择的行的数据
原文地址:http://hi.baidu.com/feifan3211/item/c5831f44158761a5df2a9fc1 如何获取jqGrid中选择的行的数据? 下面可以获取选择一行的id, ...
- C#中datagridview选中行后textbox显示选中的内容
我想让datagridview中某一行被选中时,textbox中显示选中的值,datagridview的选中模式是整行:this.dataGridView1.SelectionMode = DataG ...
- 获取jqGrid中选择的行的数据以及 jqGrid获得所有行数据的方法
获取jqGrid中选择的行的数据: 获取选择一行的id,如果你选择多行,那下面的id是最后选择的行的id: 1 var id=$('#gridTable').jqGrid('getGridPara ...
- C#——DataGridView选中行,在TextBox中显示选中行的内容
C#--DataGridView选中行,在TextBox中显示选中行的内容,在DataGridView的SelectionChanged实践中设置如下代码 private void dataGridV ...
随机推荐
- [转] boost------ref的使用(Boost程序库完全开发指南)读书笔记
http://blog.csdn.net/zengraoli/article/details/9663057 STL和Boost中的算法和函数大量使用了函数对象作为判断式或谓词参数,而这些参数都是传值 ...
- 将JSON数组显示前台Table中
将JSON数组显示前台Table中 在最近的学习中遇到一个小问题,如何把JSON数组显示在前台的table中,经过一番借鉴和学习之后终于解决了这个问题.具体的代码如下: (前提:利用ajax获取过来的 ...
- 修改tt模板让ADO.NET C# POCO Entity Generator With WCF Support 生成的实体类继承自定义基类
折腾几天记载一下,由于项目实际需要,从edmx生成的实体类能自动继承自定义的基类,这个基类不是从edmx文件中添加的Entityobject. 利用ADO.NET C# POCO Entity Gen ...
- JSP学习--常用作用域
page:当前页面,也就是只要跳到别的页面就失效了 request:一次会话,简单的理解就是一次请求范围内有效 session:浏览器进程,只要当前页面没有被关闭(没有被程序强制清除),不管怎么跳转都 ...
- JY03-HTML/CSS-京东02
---恢复内容开始--- 1. position:absolute 1.1 绝对定位设置定位值为百分比时: 如设置right:50%,即元素右侧外边框距离父盒子右侧始终始终为父盒子宽度的一半. 可以使 ...
- 2015-09-21CSS:引入方式、选择器、注释、文字样式
1.HTML中引入CSS的方式 HTML中引入CSS的样式有4种:行内式.内嵌式.导入式和链接式. ⑴行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用 ...
- Phonegap 极光推送api 服务器端推送代码
.net 版本 极光推送 后台接口 HttpWebResponseUtility类 using System; using System.Collections.Generic; using Syst ...
- arp断网攻击解决办法
局域网中有这个提示arp断网攻击是正常的,说明防火墙已经拦截了,是有人用P2P工具控制你的网速,或者是局域网有机器中病毒了也会有这样的提示,不过不用担心,今天给大家带来几个防止arp断网攻击的办法,希 ...
- 在ubuntu14.04上安装oracle java6 java7的方法
注意: Debian建议安装openjdk,在release包中已包含. oracle的java需要自己安装,安装步骤如下: 1. 首先安装java-package,安装方法:apt-get inst ...
- angularJS中XHR与promise
angularJS应用是完全运行在客户端的应用,我们可以通过angularJS构建一个不需依赖于后端,同时能够实现动态内容和响应的web应用,angularJS提供了将应用与远程服务器的信息集成在一起 ...