java_easyui体系之DataGrid（5）
来源：互联网 发布：多重快速选择算法 编辑：程序博客网 时间：2024/06/11 23:22
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 onclick="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 onclick="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" onclick="show();">查询</a> <a class="easyui-linkbutton" onclick="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 onclick="addUser()" iconCls="icon-add">增加</div> <div onclick="delUsers()" iconCls="icon-remove">删除</div> <div onclick="updateUser()" iconCls="icon-edit">编辑</div> </div></div> </body></html>更多内容 ： java_easyui体系之目录——00
0 1
- java_easyui体系之DataGrid（5）
- java_easyui体系之DataGrid（1）
- java_easyui体系之DataGrid（2）
- java_easyui体系之DataGrid（3）
- java_easyui体系之DataGrid（4）
- java_easyui体系之form
- java_easyui体系之layout
- java_easyui体系之更换主题
- java_easyui体系之目录——00
- java_easyui体系之Tree的加载
- java_easyui体系之多级表头及冻结列
- struts2复习之（一）体系介绍
- JVM系列之JVM体系（一）
- flex学习笔记之5 DataGrid
- Flex DataGrid之二（动态赋值）
- jquery easyui 学习之datagrid（一）
- EASYUI之DataGrid的使用（java）
- 【EasyUI】初识之Datagrid（一）
- fighting
- 第21章 DHCP
- 工具接口标准(TIS)可执行链接格式(ELF)规范-卷II-处理器特性（Intel架构） （Processor Specific (Intel Architecture)）
- Data structure
- vs2003+VAssistX插件快捷键失效
- java_easyui体系之DataGrid（5）
- HTML5 2D游戏引擎研发系列 第六章 <Canvas技术篇-画布技术-混色特效和粒子>
- splash 启动界面
- Asp.net MVC DropDownLists 几篇非常好的博文
- IOS tableView 点击一下cell，效果随离开触摸恢复（个人）
- Spring整合hibernate中Datasouce、SessionFactory、Transaction配置
- OSTCBX/Y OSTCBBitX/Y 在TCB结构里的作用
- 云计算 安全
- 关于Spring管理Hibernate的批量数据处理
