easyui_datagrid合并行单击某行选中所有
实现如下功能:

代码:
<table id="dg" class="easyui-datagrid" title="Merge Cells for DataGrid" style="width:700px;height:750px"
data-options="
rownumbers: true,
singleSelect: false,
iconCls: 'icon-save',
url: '../datagrid/datagrid_data1.json?n='+Math.random(),
method:'get',
onLoadSuccess: onLoadSuccess,
checkOnSelect:true,
selectOnCheck:true,
onCheck:onCheck,
onUncheck:onUncheck
">
<thead>
<tr>
<th data-options="field:'ck',checkbox:true"></th>
<th data-options="field:'productid',width:100">Product</th>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',width:240">Attribute</th>
<th data-options="field:'status',width:60,align:'center'">Status</th>
</tr>
</thead>
</table>
<script type="text/javascript">
//判断rowIndex是否被选中
//调用方法:$("#dg").datagrid("isChecked", { rowIndex: rowIndex })
$.extend($.fn.datagrid.methods, {
isChecked: function (dg, param) {
var flag = false;//是否选中
var allRows = $(dg).datagrid('getChecked'); //获取所有被选中的行
$.each(allRows, function (index,item) {
if (param.rowIndex == $(dg).datagrid('getRowIndex', item)) {
flag = true;
return false;//return false终止循环,return true,跳出循环,进入下一次循环,跟函数返回值无关
}
})
return flag;
}
})
var index = '';
function onCheck(rowIndex, rowData) {
if (index == '') {
index = rowIndex;
var productid = rowData["productid"];
var rows = $("#dg").datagrid("getRows");
//alert($("#dg").datagrid("isChecked", { rowIndex: rowIndex }));
for (var i = 0; i < rows.length; i++) {
if (rows[i]["productid"] == productid) {
$("#dg").datagrid("checkRow", i);
}
}
index = '';
}
}
function onUncheck(rowIndex, rowData) {
if (index == '') {
index = rowIndex;
var productid = rowData["productid"];
var rows = $("#dg").datagrid("getRows");
//alert($("#dg").datagrid("isChecked", { rowIndex: rowIndex }));
for (var i = 0; i < rows.length; i++) {
if (rows[i]["productid"] == productid) {
$("#dg").datagrid("uncheckRow", i);
}
}
index = '';
}
}
function onLoadSuccess(data){
var merges = [{
index: 1,
rowspan: 3
}];
for(var i=0; i<merges.length; i++){
$(this).datagrid('mergeCells',{
index: merges[0].index,
field: 'productid',
rowspan: merges[0].rowspan
}).datagrid('mergeCells', {
index: merges[0].index,
field: 'ck',
rowspan: merges[0].rowspan
});
}
}
</script>
easyui_datagrid合并行单击某行选中所有的更多相关文章
- 基于jquery 全选、反选、各行换色、单击行选中事件实现代码
<script language="javascript"> $(document).ready(function(){ //各行换色 $('table tr:odd' ...
- 使用自连接、for xml path('')和stuff合并显示多行数据到一行中(转)
原文: http://njm.iteye.com/blog/795881 --使用 自连接.for xml path('')和stuff合并显示多行数据到一行中 --注 --1.计算列可以不用包含在聚 ...
- QTableWidget行选中/删除/添加行
1 均分各列 tableWidget->horizontalHeader()->setStretchLastSection(true); //就是这个地方 tableWidget-> ...
- GridView/DataGrid行单击和双击事件实现代码_.Net教程
功能: 单击选中行,双击打开详细页面 说明:单击事件(onclick)使用了 setTimeout 延迟,根据实际需要修改延迟时间 ;当双击时,通过全局变量 dbl_click 来取消单击事件的响应 ...
- TreeViewItem实现整行选中 (两种用法)
用法一 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quo ...
- 支持行单击、双击事件的GridView和DataList控件(译)
支持行单击.双击事件的GridView和DataList控件(译) 让GridView 和 DataList 控件响应鼠标单击.双击事件.并且,使用 ClientScript.Regi ...
- 在dbgrid中如何多行选中记录(ctl与shift均可用)
在dbgrid中如何多行选中记录(ctl与shift均可用),设置dbgrid的dgmultiselect为true,只有ctl好用而shift不好用,如何使shift也好用 Dbgrid源代码:pr ...
- jquery-easyui的datagrid在checkbox多选时,行选中不正确应,去除高亮的解决方法
jquery-easyui的datagrid在checkbox多选时,行选中不正确应,去除高亮的解决方法 工作中用到一个具有多选功能的easyui-datagrid在处理cell的点击事件时,不同 ...
- el-table合并行并自定义某一列或几列
在el-table的官方组件中并没有看到具体的合并行或者列及自定义表格内容,于是就自己写了一个效果如下所示. 这种对左侧内容要求比较高,要求行合并,并要自定义一些内容.下面说一下具体方法及代码写法. ...
随机推荐
- 每日英语:Genetic Manipulation Extends Life of Mice 20%
By reducing the activity of one type of gene, scientists said they increased the average life span o ...
- Mac OSX安装 GitLab 5.x
1)安装mac 2) 创建git用户和git组 4) 安装XCode 5) 安装命令行组件 6) 安装 Home brew $ ruby -e "$(curl -fsSL https://r ...
- 1.2.1 工作流管理系统参考模型 (zhuan)
http://book.51cto.com/art/201009/228705.htm ************************************************* <jB ...
- rpm信息查看
rpm -qpi xxx.rpm #查看rpm包相关信息,一般有版本,build日期,功能描述,大小,公司等等 rpm -qpl xxx.rpm #查看rpm包含安装的目录和文件 rpm -qpc ...
- java 多线程阻塞队列 与 阻塞方法与和非阻塞方法
Queue是什么 队列,是一种数据结构.除了优先级队列和LIFO队列外,队列都是以FIFO(先进先出)的方式对各个元素进行排序的.无论使用哪种排序方式,队列的头都是调用remove()或poll()移 ...
- selinux开关
状态查看 /usr/sbin/sestatus -v 临时打开 setenforce 1 #设置SELinux 成为enforcing模式 临时关闭 setenforce 0 #设置SELinux 成 ...
- CentOS LDAP安装配置
安装: Install the openldap, openldap-servers, and openldap-clients RPMs. Edit the /etc/openldap/slapd. ...
- 风雪之隅(Laruence PHP开发组成员, Zend兼职顾问, Yaf, Yar, Yac, Opcache等项目作者、维护者.)
http://www.laruence.com/?from=inf&wvr=5&loc=infblog
- 关于Unity树形插件Tree View Control的相关搜集
博客http://blog.csdn.net/qq_15267341/article/details/51997926 的这个 Script Based Runtime Tree-Vie ...
- 3DS更新R4烧录卡内核
机子是N3DSLL,用的R4烧录卡是银卡HK版. 关于R4烧录卡的基础知识科普贴: https://tieba.baidu.com/p/4855297365 为了防止该网页挂掉还是存图吧. 找最新内核 ...