jquery easyui DataGrid简单示例
一、简单示例
HTML
<tableid="tbList"striped="true"rownumbers="true"fix="true"fitcolumns="true"title="标题"
idfield="ID"checkbox="true"url="@Url.Action("ListData")">
<thead>
<tr>
<thfield="ID"checkbox="true"width="30">
</th>
<thfield="Name"width="200"align="center">
名称
</th>
</tr>
</thead>
</table>
JS
$('#tbList').datagrid({pagination:true});
$("#btnSearch").click(function(){//查询方法
$('#tbList').datagrid("unselectAll");
$('#tbList').datagrid({queryParams:{SearchName:$("#SearchName").val()}});
});
二、基本用法
冻结列
$('#tbList').datagrid({pagination:true,
frozenColumns:[[
{field:'BId',checkbox:'true',width:30},
{field:'BNo',title:'牌号',width:100},
{field:'FNo',title:'班号',width:100}
]],
fitColumns:false//禁止自适应宽度、可以水平滚动
});
去掉分页
$('#tbList').datagrid({pagination:true});
更改为
$('#tbList').datagrid();
或
$('#tbList').datagrid({pagination:false});
注意：同时需要设置table的高度，而且不能为auto
复选框以及单选
<tableid="tbList"style="height:330px;"striped="true"rownumbers="true"fitColumns="true"title=""iconcls="icon-edit"
checkbox="true"idfield="Id"url="@Url.Action("ListData")">
<thead>
<tr>
<thfield="Id"checkbox="true"width="150">
</th>
</tr>
</thead>
</table>
变为单选（添加singleSelect="true" ）
<tableid="tbList"style="height:330px;"striped="true"rownumbers="true"fitColumns="true"title=""iconcls="icon-edit"singleSelect="true"checkbox="true" idfield="Id"url="@Url.Action("ListData")">
加载数据后默认全选：
$(document).ready(function(){
$('#tbList').datagrid({
onLoadSuccess:function(data){
$('#tbList').datagrid('selectAll');
}
});
获取行数
$('#tbList').datagrid("getRows").length;
隐藏列
<thfield="Dept"width="100"hidden="true">名称</th>
清空原有数据
方法1：
varitem=$('#filegrid').datagrid('getRows');
if(item){
for(vari=item.length-1;i>=0;i--){
varindex=$('#filegrid').datagrid('getRowIndex',item[i]);
$('#filegrid').datagrid('deleteRow',index);
}
}
方法2：(测试过)
$('#filegrid').datagrid('loadData',{total:0,rows:[]});
解析：loadData：载入本地数据，旧记录将被移除。
行点击事件
$('#tbList').datagrid({onClickRow:function(){//代码}});
datagrip单击行的时候，将单选按钮设置为选中
<scripttype="text/javascript">
varList={};
List.RadioFormatter=function(value,rec,index){
return"<inputid='radio_id'name='radio_name'type='radio'value='"+rec.Id+"'/>";
};
$(document).ready(function(){//呈现列表数据
$('#tbList').datagrid({onClickRow:
function(){
//单击行的时候，将单选按钮设置为选中
varid=$('#tbList').datagrid("getSelected");
$("input[name='name']").each(function(){
if($(this).val()==id.Id){
$(this).attr("checked",true);
}
});
}
});
});
</script>
<tableid="tbList"style="height:300px;"striped="true"rownumbers="true"fitColumns="true"title=""iconcls="icon-edit"
singleSelect="true"checkbox="true"idfield="Id"url="@Url.Action("ListData")">
<thead>
<tr>
<thfield="Id"width="30"formatter="PickupList.RadioFormatter">
</th>
</tr>
</thead>
</table>
table中td的时间格式问题
1.页面
<thfield="Test"formatter="Common.TimeFormatter"width="50"></th>
2.js
varCommon={
//EasyUI用DataGrid用日期格式化
TimeFormatter:function(value,rec,index){
if(value==undefined){
return"";
}
/*json格式时间转js时间格式*/
value=value.substr(1,value.length-2);
varobj=eval('('+"{Date:new"+value+"}"+')');
vardateValue=obj["Date"];
if(dateValue.getFullYear()<1900){
return"";
}
varval=dateValue.format("yyyy-mm-ddHH:MM");//控制格式
returnval.substr(11,5);
}
};
table中td内容太长自动换行
添加属性nowrap="false"
将nowrap:false这个属性设置在table的属性中，不要设置在字段的属性中，字段可以设置宽度，这样就可以做到当文字长度超过规定的宽度后自动换行了
行和复选框的分离
方法一：（1.3版本才能用）
checkOnSelect="false"selectOnCheck="false"
注意：当使用$("#tbList").datagrid("getSelections");时候，只有行被选中，才能取到该行。一般情况，选中行时候，行为黄色背景。
eg.<tablecheckOnSelect="false"></table>
varselected=$("#tbList").datagrid("getSelections");
if(selected.length==0){
alert("请选择！");
return;
}
varidString="";
$.each(selected,function(index,item){
idString+=item.Id+",";
});
方法二（1.3版本之前的解决方法）
varIsCheckFlag=true;
$('#tbList').datagrid({
pagination:true,
onClickCell:function(rowIndex,field,value){
IsCheckFlag=false;
},
onSelect:function(rowIndex,rowData){
if(!IsCheckFlag){
IsCheckFlag=true;
$("#tbList").datagrid("unselectRow",rowIndex);
}
},
onUnselect:function(rowIndex,rowData){
if(!IsCheckFlag){
IsCheckFlag=true;
$("#tbList").datagrid("selectRow",rowIndex);
}
}
});
设置数据列表的样式
$(document).ready(function(){
//呈现列表数据
$('#tbList').datagrid({pagination:true,
rowStyler:function(index,row){
if(row.ID<10){//那么数据的id字段小于10的，将显示为灰色字体
return'color:#999;';//和一般的样式写法一样
}
}
});
});
条件查询
复选框的bug:使用参数查询时候，在查询之前选中的选项，在查询之后，使用getSelections方法去获取，依旧存在该选项
解决方案：通过unselectAll在查询之前清空复选框即可
$("#btnSearch").click(function(){
$('#tbList').datagrid("unselectAll");
$('#tbList').datagrid({queryParams:{SearchName:$("#SearchName").val()}});
});
查询bug:使用参数查询时候，在查询之后，显示的当前页码还是之前的，不会重置为1，还是之前页码；如果当前总页数为比当前小，导致页面显示为空。比如，当前第三页，加入时间查询后，只有1页数据，那么当前页码还是3，导致页面显示空白。
解决方案：设置pageNumber为1
$("#btnSearch").click(function(){
$('#tbList').datagrid("unselectAll");
$('#tbList').datagrid({pageNumber:1,queryParams:{SearchName:$("#SearchName").val()}});
});
三、行数据的增删改
HTML（不分页列表）
<tableid="tbProductList"style="height:500px;max-height:500px;"fix="true"fitcolumns="true"idfield="ID"url="@Url.Action("ListData")"></table>
JS
$(document).ready(function(){
vardatagrid;
vareditRow=undefined;
datagrid=$("#tbList").datagrid({
border:true,
checkbox:true,
iconCls:'icon-save',//图标
nowap:true,//列内容多时自动折至第二行
pagination:false,
rownumbers:true,
striped:true,//行背景交换
columns:[[//显示的列
{field:'ID',title:'编号',width:100,align:'center',sortable:true,checkbox:true},
{field:'Name',title:'名称',width:100,sortable:true},
{
field:'PriceType',title:'类型',width:100,align:'center',
formatter:function(value,row){returnrow.TypeName;},
editor:{
type:'combobox',options:{
valueField:'Value',
textField:'Text',
method:'get',
url:$("#TypeUrl").val(),
required:true
}
}
},
{
field:'Price',title:'价格',width:100,align:'center',
editor:{
type:'numberbox',options:{
required:true,
min:0,
precision:2
}
}
},
{
field:'Count',title:'数量',width:100,align:'center',
editor:{
type:'numberbox',options:{
required:true,
min:0,
precision:0
}
}
}
]],
queryParams:{action:'query'},//查询参数
toolbar:[{text:'添加',iconCls:'icon-add',handler:function(){//添加列表的操作按钮添加，修改，删除等
//添加时先判断是否有开启编辑的行，如果有则把开户编辑的那行结束编辑
if(editRow!=undefined){
datagrid.datagrid("endEdit",editRow);
}
//添加时如果没有正在编辑的行，则在datagrid的第一行插入一行
if(editRow==undefined){
datagrid.datagrid("insertRow",{
index:0,//indexstartwith0
row:{
}
});
//将新插入的那一行开户编辑状态
datagrid.datagrid("beginEdit",0);
//给当前编辑的行赋值
editRow=0;
}
}
},'-',
{
text:'删除',iconCls:'icon-remove',handler:function(){
//删除时先获取选择行
varrows=datagrid.datagrid("getSelections");
//选择要删除的行
if(rows.length>0){
$.messager.confirm("提示","你确定要删除吗?",function(r){
if(r){
varids=[];
for(vari=0;i<rows.length;i++){
ids.push(rows[i].ID);
}
//将选择到的行存入数组并用,分隔转换成字符串
if($.trim(ids)!=""){
//----Delete(ids.join(','));//这是post
}else{
alert("请选择要删除的信息！");
}
}
});
}
else{
$.messager.alert("提示","请选择要删除的行","error");
}
}
},'-',
{
text:'修改',iconCls:'icon-edit',handler:function(){
//修改时要获取选择到的行
varrows=datagrid.datagrid("getSelections");
//如果只选择了一行则可以进行修改，否则不操作
if(rows.length==1){
//修改之前先关闭已经开启的编辑行，当调用endEdit该方法时会触发onAfterEdit事件
if(editRow!=undefined){
datagrid.datagrid("endEdit",editRow);
}
//当无编辑行时
if(editRow==undefined){
//获取到当前选择行的下标
varindex=datagrid.datagrid("getRowIndex",rows[0]);
//开启编辑
datagrid.datagrid("beginEdit",index);
//把当前开启编辑的行赋值给全局变量editRow
editRow=index;
//当开启了当前选择行的编辑状态之后，
//应该取消当前列表的所有选择行，要不然双击之后无法再选择其他行进行编辑
datagrid.datagrid("unselectAll");
}
}
}
},'-',
{
text:'保存',iconCls:'icon-save',handler:function(){
//保存时结束当前编辑的行，自动触发onAfterEdit事件如果要与后台交互可将数据通过Ajax提交后台
datagrid.datagrid("endEdit",editRow);
}
},'-',
{
text:'取消编辑',iconCls:'icon-redo',handler:function(){
//取消当前编辑行把当前编辑行罢undefined回滚改变的数据,取消选择的行
editRow=undefined;
datagrid.datagrid("rejectChanges");
datagrid.datagrid("unselectAll");
}
},'-'],
onAfterEdit:function(rowIndex,rowData,changes){
//endEdit该方法触发此事件
//console.info(rowData);
//----Update(ids.join(','));//这是post
editRow=undefined;
},
onDblClickRow:function(rowIndex,rowData){
//双击开启编辑行
if(editRow!=undefined){
datagrid.datagrid("endEdit",editRow);
}
if(editRow==undefined){
datagrid.datagrid("beginEdit",rowIndex);
editRow=rowIndex;
}
}
});
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。