一:效果图:
二:页面效果图代码:
var IsCheckFlag = true; //标示是否是勾选复选框选中行的,true - 是 , false - 否
var jishu=0;
//绚染列表
$('#tt').datagrid({
title:"菜单列表",
iconCls:"icon-save",//图标
url:'queryList.action',
width:"100%",
height:"auto",
nowrap: false, //默认true,设置为 true,则把数据显示在一行里。
striped: true, //设置为 true,则把行条纹化。(即奇偶行使用不同背景色)
border: true, //边框
collapsible:false,//是否可折叠的
fitColumns:true,//设置为 true,则会自动扩大或缩小列的尺寸以适应网格的宽度并且防止水平滚动。
fixed:true,//设置为 true,则当 'fitColumns' 设置为 true 时放置调整宽度。
singleSelect:false,//是否单选
pagination:true,//分页控件
rownumbers:true,//显示行号
queryParams: form2Json("searchform"),//多条件查询关键之处,queryParams是需要发送远程请求带参数的数据放入这里面
remoteSort:false,//默认true,定义是否从服务器排序数据。
frozenColumns:[[ {field:'ck',checkbox:true}]],//多选框,位置固定在最左边
columns:[
[
{field: "mc", title: "菜单名称", width:"33%", align: "center"},//field后台返回数据的name名称, title标题名称 ,width宽度,align字体位置
{field: "faid_name", title: "所属一级菜单",width:"33%",align: "center"},
{field: "id",title:"操作",width:fixWidth(0.333),align:"center",
formatter:function(value,row,index){ //value:字段的值。 row:当前行的所有数据row点出具体的数据,比如要faId就是row.faId就可以用。index:行的索引,就是当前行的行号。
if(null==row.faId || ""==row.faId){
var btn = "<a href='javascript:void(0);' class='editcls' onclick=\"delAppInfoReady('1','"+row.id+"')\">删除</a> <a href='javascript:void(0);' class='editcls' onclick=\"dialogAdd_Edit('修改界面','确认修改','"+row.id+"')\">修改</a><br>";
return btn;
}
}
}
]
],//显示数据库查询出来的数据
/*
*以下方法就是解决“点击行内元素还是相当于选中了该行,只是复选框的勾不会勾上而已”的问题
*/
// 当用户单击一个单元格时触发。
onClickCell: function (rowIndex, field, value) {
IsCheckFlag = false;
},
//当用户选中一行时触发,参数包括:rowIndex:选中行的索引,从 0 开始,rowData:选中行对应的记录
onSelect: function (rowIndex, rowData) {
if (!IsCheckFlag) {
IsCheckFlag = true;
$(this).datagrid("unselectRow", rowIndex);
}
},
//当用户取消选中一行时触发
onUnselect: function (rowIndex, rowData) {
if (!IsCheckFlag) {
IsCheckFlag = true;
$(this).datagrid("selectRow", rowIndex);
}
},
/*
*以下方法就是解决点击全选“多选框中有一小部分是不可选的”而不会选中不可选部分的的问题,不过因为有一部指定行数没有选中,所以点击全选,全选功能依然有,但全选选项框的勾没有,因为指定的行没有备选上,所以全选框就不算全选,还有一点点的缺陷。
*/
//加载完毕后触发获取所有的checkbox遍历判断哪些单选框不可选取
onLoadSuccess: function(data){
$('#tt').datagrid('clearSelections'); //一定要加上这一句,要不然datagrid会记住之前的选择状态,删除时会出问题
if (data.rows.length > 0) {
//循环判断操作为新增的不能选择
for (var i = 0; i < data.rows.length; i++) {
//根据operate让某些行不可选
if (null==data.rows[i].faId || ""==data.rows[i].faId) {
$("input[type='checkbox']")[i + 1].disabled = true;
}
}
}
},
//当用户点击一行时触发,参数包括: rowIndex:被点击行的索引,从 0 开始 ,rowData:被点击行对应的记录
onClickRow: function(rowIndex, rowData){
//加载完毕后获取所有的checkbox遍历,单击单选行不可用
$("input[type='checkbox']").each(function(index, el){
//如果当前的复选框不可选,则不让其选中
if (el.disabled == true) {
$("#tt").datagrid('uncheckRow', index - 1);
}
});
},
//当用户双击一行时触发,参数包括: rowIndex:被点击行的索引,从 0 开始 ,rowData:被点击行对应的记录
onDblClickRow : function(rowIndex, rowData) {
//加载完毕后获取所有的checkbox遍历双击单选行不可用
$("input[type='checkbox']").each(function(index, el){
//如果当前的复选框不可选,则不让其选中
if (el.disabled == true) {
$("#tt").datagrid('uncheckRow', index - 1);
}
});
},
//当用户勾选全部行时触发
onCheckAll : function(rows) {
var panduan=0;
$("input[type='checkbox']").each(function(index, el) {
if(el.disabled== true){
$("#tt").datagrid('uncheckRow', index - 1);//此处参考其他人的代码,原代码为unselectRow
panduan++;
}
});
if(panduan>0){
$("input[type='checkbox']").each(function(index, el) {
if(jishu%2==0){
if (el.disabled== true) $("#tt").datagrid('uncheckRow', index - 1);//此处参考其他人的代码,原代码为unselectRow
} else $("#tt").datagrid('uncheckRow', index - 1);//此处参考其他人的代码,原代码为unselectRow
});
jishu++;
}
},
toolbar: [{
text: '添加',
iconCls: 'icon-add',
handler: function() {
openDialog("add");
}
}, '-', {
text: '修改',
iconCls: 'icon-edit',
handler: function() {
openDialog("edit");
}
}, '-',{
text: '删除',
iconCls: 'icon-remove',
handler: function(){
openDialog("delete");
}
}], //添加按钮
});
//设置分页控件
var p = $('#tt').datagrid('getPager');
$(p).pagination({
height:"auto",
pageSize: 10,//每页显示的记录条数,默认为10
pageList: [10,15,25],//可以设置每页记录条数的列表
beforePageText: '第',//页数文本框前显示的汉字
afterPageText: '页 共 {pages} 页',
displayMsg: '当前显示 {from} - {to} 条记ee录 共 {total} 条记录',
});
//绑定搜索按钮的按键
$("#submit_search").click(function () {
$('#tt').datagrid('reload',form2Json("searchform"));//点击搜索后需要刷新,如果不刷新分页控件就会变成默认的分页控件
});