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; } } }); });
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。