java_easyui体系之DataGrid（5）
一：简介
最后一个关于datagrid的文章、是对datagrid的常用的方法、属性的一点补充：
1、 formatter的介绍与使用
2、 datagrid的样式的修改
3、 整体效果图:
二：formatter的使用
1、formatter简单介绍：
a) formatter是columnsproperty、用于列属性：三个参数——value：当前列的值、rowData当前行的值、rowIndex：当前行的索引。
b) formatter 一定返回一个字符串。这个字符串用于页面上这一列的显示。
2、formatter用法：
a) 通过formatter在datagrid中追加一行存放操作数据的按钮、并为按钮添加点击函数、通过rowIndex获取行数据进行修改删除：追加一个控制列、包含编辑、删除两个按钮。
}, {
title : '控制',
field : 'id',
width : 200,//必须要给
formatter: function(value,rowData,index){
//注意这里不能传rowData、rowData是一个对象、不能在字符串中传递一个对象。这里可以通过index获取对应rowData
return '<button οnclick="updateUserByButton('+index+')">编辑</button><button>删除</button>';
}
}
b) 使用指定内容改变原有列显示内容：将密码一栏用六个”*“代替
columns : [ [ {
title : '密码',
field : 'passWord',
width : 200,//必须要给
editor : {
type:'validatebox',
options:{
required: true,
}
},
formatter: function(value,rowData,index){
//必须返回一个字符串、用于替换被加formatter的单元格。
return '******';
//鼠标移上去弹出一个提示、原理是可以将返沪的字符串以HTML的格式来解析
//return '<a title="'+value+'">'+value+'</a>';
}
}
c) 当鼠标悬停在某列时、完整显示这一列的内容：悬停在修改时间栏显示完整修改时间
三：样式的修改
1、修改行样式
直接在datagrid初始化时：加上下面代码、if是判断那些行会被修饰
$('#datagrid').datagrid({
//行样式
rowStyler: function(index,row){
if (row.userName == 'chy'){
return 'background-color:#6293BB;color:#fff;'; // return inline style
}
},
2、修改列样式
在列属性上加：
}, {
title : '姓名',
field : 'userName',
width : 100,//必须要给
editor : {
type:'validatebox',
options:{
required: true,
}
},
styler: function(value,row,index){
if (row.userName != ''){
return 'background-color:#ffee00;color:red;';
// the function can return predefined css class and inline style
// return {class:'c1',style:'color:red'}
}
}
}四：补充
1、 formatter 格式日期没有实现、扩展的方法调用不到、回头再看看。
2、 不要在一个datagrid中出现两个相同的field
完整user.jsp代码：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<body>
<script type="text/javascript">
var editRow = undefined;//用于存放当前编辑行的index
$(function() {
$('#datagrid').datagrid({
//行样式
rowStyler: function(index,row){
if (row.userName == 'chy'){
return 'background-color:#6293BB;color:#fff;'; // return inline style
}
},
url : 'login_getUserJson.action',
title : '用户列表',
iconCls : 'icon-save',
pagination : true,
pageSize : 10,
pageList : [ 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 ],
fit : true,//使表格自适应
fitColumns : false,//当使用冻结列：frozenColumms的时候必须设置为false或者不写
nowrap : false,//表格中的文字可以换行、默认是false、不能换行、这样在文字很多的时候就看不到全部：使用真实的数据去测试
border : false,
idFeild : 'id',//标识、会记录我们选中项的id、不一定是id、通常使用主键
sortName : 'id',//设置默认排序时的 字段（必须是field中的一个字段）
sortOrder : 'asc',//是按照升序还是降序排序 但是仅仅添加这两个字段并不会自动排序、这样写的意义就是前台会自动的向后台传递两个参数：sort order,我们可以在后台查询记录的时候进行排序
frozenColumns : [[{//冻结列、不管数据列再多、拖动下方滚动条时、其中的列都不会滚动（这些列下方根本就没有滚动条）、参数与columns一样、注意：双中括号——[[{xxx},{xxx}]]
title : '编号',
//field : 'id',
width : 100,//必须要给
checkbox : true,
}, {
title : '姓名',
field : 'userName',
width : 100,//必须要给
editor : {
type:'validatebox',
options:{
required: true,
}
},
styler: function(value,row,index){
if (row.userName != ''){
return 'background-color:#ffee00;color:red;';
// the function can return predefined css class and inline style
// return {class:'c1',style:'color:red'}
}
}
} ]],
columns : [ [ {
title : '密码',
field : 'passWord',
width : 200,//必须要给
editor : {
type:'validatebox',
options:{
required: true,
}
},
formatter: function(value,rowData,index){
//必须返回一个字符串、用于替换被加formatter的单元格。
return '******';
//鼠标移上去弹出一个提示、原理是可以将返沪的字符串以HTML的格式来解析
//return '<a title="'+value+'">'+value+'</a>';
}
}, {
title : '创建时间',
field : 'createTime',
width : 200,//必须要给
editor : {
type:'datetimebox',//扩展的用于选择具体时间的类型
options:{
required: true,
}
},
align:'center',//修改列中内容align属性。
formatter : function(value,rowData,rowIndex){
//使用返回的html格式的字符串提示此列显示内容
return '<a title="'+value+'">'+value+'</a>';
}
}, {
title : '修改时间',
field : 'updateTime',
width : 200,//必须要给
editor : {
type:'datetimebox',//扩展的用于选择具体时间的类型
options:{
required: true,
}
},
/* 暂时没有效果、引入不了新增的Date.fromat()方法
formatter: function(v){//这里写死看一下效果、没有动后台代码
//格式化后台传过来的长整型类型
console.info(formatTime(1389085540250));
return formatTime(1389085540250);
}
*/
}, {
title : '控制',
field : 'id',
width : 200,//必须要给
formatter: function(value,rowData,index){
//注意这里不能传rowData、rowData是一个对象、不能在字符串中传递一个对象。这里可以通过index获取对应rowData
return '<button οnclick="updateUserByButton('+index+')">编辑</button><button>删除</button>';
}
} ] ],
toolbar : [ {
text : '增加',
iconCls : 'icon-add',
handler : function() {
privateAddUser();
}
}, '-', {
text : '删除',
iconCls : 'icon-remove',
handler : function() {
privateDelUsers();
}
}, '-', {
text : '修改',
iconCls : 'icon-edit',
handler : function() {
privateUpdateUser();
}
}, '-',{
text : '保存',
iconCls : 'icon-save',
handler : function() {
$('#datagrid').datagrid('endEdit', editRow);
}
}, '-',{
text : '取消编辑',
iconCls : 'icon-undo',
handler : function() {
//将事务回滚、取消选中的行
editRow = undefined;
$('#datagrid').datagrid('rejectChanges');
$('#datagrid').datagrid('unselectAll');
}
}, '-',{
text : '取消选中',
iconCls : 'icon-undo',
handler : function() {
$('#datagrid').datagrid('unselectAll');
}
}, '-',{
text : '清空显示',
iconCls : 'icon-undo',
handler : function() {
$('#datagrid').datagrid('loadData', []);
}
}, '-',{
text : '还原显示',
iconCls : 'icon-redo',
handler : function() {
$('#datagrid').datagrid('load');
}
}, '-' ],
onAfterEdit : function(rowIndex, rowData, changes){
/*
* 如何区别是添加、还是修改？
*/
//获取所有插入的行信息
var inserted = $('#datagrid').datagrid('getChanges','inserted');
//获取所有被修改的行信息
var updated = $('#datagrid').datagrid('getChanges','updated');
//传入后台的url、根据到底是添加、还是修改动态改变、即进入Action中不同的方法。
var url = '';
if(inserted.length > 0){
url='login_addUser.action';
}
if(updated.length > 0){
url='login_updateUser.action';
}
$.ajax({
url : url,
data : rowData,
dataType : 'json',
success : function(r){
if(r.success && r){
//如果成功、则确定显示操作之后的行信息、即点击撤销的时候不会回滚事务（仅是前台、此时后台关于数据库的已经处理）。
$('#datagrid').datagrid('acceptChanges');
//给出提示、是通过后台传过来的一个json对象
$.messager.show({
title : '提示',
msg : r.msg,
});
}else{
//如果失败、则回滚事务（仅是前台、此时后台关于数据库的已经处理）。
$('#datagrid').datagrid('rejectChanges');
$.messager.alert('错误',r.msg,'error');
}
editRow = undefined;
$('#datagrid').datagrid('unselectAll');
}
});
},
//双击修改行
onDblClickRow : function(rowIndex, rowData){
changeUpdateEditor();
$('#datagrid').datagrid('unselectAll');
if(editRow != undefined){
$('#datagrid').datagrid('endEdit', editRow);
editRow = undefined;
}
if(editRow == undefined){
$('#datagrid').datagrid('beginEdit',rowIndex);
editRow = rowIndex;
}
},
//显示右键菜单、并且设置显示位置就是触发鼠标右击的位置。
onRowContextMenu : function(e, rowIndex, rowData){
//1、阻止原来浏览器右键事件
e.preventDefault();
$(this).datagrid('unselectAll');
$(this).datagrid('selectRow', rowIndex);
//显示自定义右键菜单
$('#mm').menu('show', {
//动态显示右键菜单位置
left: e.pageX,
top: e.pageY
});
}
});
//将表头内容居中
$('.datagrid-header div').css('textAlign', 'center');
});
/*
* 右键菜单功能
*/
//添加记录
function addUser(){
privateAddUser();
}
//修改记录
function updateUser(){
privateUpdateUser();
}
//删除记录
function delUsers(){
privateDelUsers();
}
function privateDelUsers(){
var rows = $('#datagrid').datagrid('getSelections');
if(rows.length > 0){
$.messager.confirm('请确认','您确定要删除当前选择的'+rows.length+'项吗？', function(option){
if(option){
//一般将id的一个集合传到后台删除
var ids = [];
for(var i = 0; i< rows.length; i++){
ids.push(rows[i].id);
}
console.info(ids.join(','));
$.ajax({
url : 'login_delUsers.action',
data : {
ids : ids.join(',')
},
dataType : 'json',
success : function(r){
$('#datagrid').datagrid('load');
$('#datagrid').datagrid('unselectAll');
$.messager.show({
title : '提示',
msg : '删除成功'
});
}
});
}
});
}else{
$.messager.alert('提示', '请选择要删除的记录', 'error');
}
}
function privateUpdateUser(){
var rows = $('#datagrid').datagrid('getSelections');
if(rows.length ==1){
changeUpdateEditor();
if(editRow != undefined){
$('#datagrid').datagrid('endEdit', editRow);
editRow = undefined;
}
if(editRow == undefined){
var rowIndex = $('#datagrid').datagrid('getRowIndex',rows[0]);
$('#datagrid').datagrid('beginEdit',rowIndex);
editRow = rowIndex;
$('#datagrid').datagrid('unselectAll');
}
}else if( rows.length == 0){
$.messager.alert('提示', '请选择一条修改记录！','info');
}else if(rows.length >= 1){
$.messager.alert('提示', '只能选择一条修改记录！','info');
}
}
function privateAddUser(){
if(editRow != undefined){
$('#datagrid').datagrid('endEdit', editRow);
}
if(editRow == undefined){
//新增的时候不让用户选择创建时间、应该用后台自动生成的当前的时间
changeAddEditor();
$('#datagrid').datagrid('insertRow', {
index : 0,
row : {
userName:'请输入名称',
passWord:'请输入密码'
}
});
editRow = 0;
$('#datagrid').datagrid('beginEdit',0);
}
}
//查询数据
function show() {
console.info(serializeObject($('#searchForm')));
$('#datagrid').datagrid('load', serializeObject($('#searchForm')));
}
//清除查询条件、返回初始数据展示状态
function clean() {
$('#datagrid').datagrid('load', {});
$('#searchForm').find('input').val('');
}
//添加行时改变editor
function changeAddEditor(){
$('#datagrid').datagrid('removeEditor', ['updateTime','createTime']);
$('#datagrid').datagrid('addEditor', {
field : 'passWord',
editor : {
type:'validatebox',
options:{
required: true,
}
}
});
}
//修改行是改变editor
function changeUpdateEditor(){
$('#datagrid').datagrid('removeEditor','passWord');
$('#datagrid').datagrid('addEditor', [{
field : 'createTime',
editor : {
type:'datetimebox',//扩展的用于选择具体时间的类型
options:{
required: true,
}
}
},{
field : 'updateTime',
editor : {
type:'datetimebox',//扩展的用于选择具体时间的类型
options:{
required: true,
}
}
}]);
}
function updateUserByButton(rowIndex){
console.info(rowIndex);
//通过rowIndex获取指定行数据
var rows = $('#datagrid').datagrid('getRows');
console.info(rows[rowIndex]);
}
</script>
<div class="easyui-layout" data-options="fit:true,border:false,">
<div data-options="region:'north',border:false,title:'过滤'"
style="height: 140px;overflow: hidden">
<form id="searchForm">
<table class="datagrid-toolbar" style="height:100%;width:100%">
<tr>
<th>用户名</th>
<td><input id="username" name="username" style="width: 320px" />
</td>
</tr>
<tr>
<th>创建时间</th>
<td><input name="createTimeStart" editable="false"
class="easyui-datetimebox" style="width:155px;" /> 至 <input
name="createTimeEnd" editable="false" class="easyui-datetimebox"
style="width:155px;" /></td>
</tr>
<tr>
<th>修改时间</th>
<td><input name="modifyTimeStart" editable="false"
class="easyui-datetimebox" style="width:155px;" /> 至 <input
name="modifyTimeEnd" editable="false" class="easyui-datetimebox"
style="width:155px;" /> <a class="easyui-linkbutton"
οnclick="show();">查询</a> <a class="easyui-linkbutton"
οnclick="clean();">清空</a></td>
</tr>
</table>
</form>
</div>
<div data-options="region:'center',border:false">
<table id="datagrid"></table>
</div>
<%-- 通过指定class的方式、构造右键菜单--%>
<div id="mm" class="easyui-menu" style="width:120px;display:none;">
<div οnclick="addUser()" iconCls="icon-add">增加</div>
<div οnclick="delUsers()" iconCls="icon-remove">删除</div>
<div οnclick="updateUser()" iconCls="icon-edit">编辑</div>
</div>
</div>
</body>
</html>本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
