<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- easyui的样式 -->
<link rel="stylesheet" type="text/css" href="../jslib/jquery-easyui-1.3.1/themes/default/easyui.css">
<!-- 小图标的样式 -->
<link rel="stylesheet" type="text/css" href="../jslib/jquery-easyui-1.3.1/themes/icon.css">
<script type="text/javascript" src="../jslib/jquery-easyui-1.3.1/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../jslib/jquery-easyui-1.3.1/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../jslib/jquery-easyui-1.3.1/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="../jslib/syUtil.js"></script>
<script type="text/javascript">
var datagrid;
var editRow = undefined;
$(function(){
datagrid = $("#datagrid").datagrid({
url : sy.bp()+'/userController/datagrid.action',
iconCls : "icon-save",
pagination : true,
pageSize : 10,
pageList : [10,20,30],
//fit属性让这个表格填充到父级容器中
fit : true,
//fitColumns让表格自动调整列的宽度,而不出现横向的滚动条
fitColumns : false,
//如果一个列的值太长,需要折行显示,就需要设置nowrap : false
nowrap : false,
border : false,
idField : "id",
//行的样式
rowStyler : function(rowIndex,rowData){
if(rowData.name=='guest'){
return "background:red";
}
},
sortName : "name",
sortOrder : "desc",
//要使用frozenColumns那么fitColumns必须为false
//frozenColumns就是在出现列滚动条时,下面这几列不动
frozenColumns : [[
{
title:"编号",
//field:"id",
width:100,
checkbox:true
},
{
title:"姓名",
field:"name",
width:100,
sortable:true,
align : 'center',
styler : function(value,rowData,rowIndex){
if(value=='guest'){
return "background:green";
}
}
}
]],
columns : [[
{
title:"密码",
field:"pwd",
width:400,
//一定要返回一个字符串
formatter:function(value,rowData,rowIndex){
return "<span title='"+value+"'>"+value+"</span>";
}
},
{title:"创建时间", field:"createdatetime", width:600},
{title:"最后修改时间", field:"modifydatetime", width:600},
{
title:"控制",
//借用一个字段,不然就显示不出来,上面那个field:"id",就注释掉
field:"id",
width:400,
//一定要返回一个字符串
formatter:function(value,rowData,rowIndex){
return "<button>删除</button><button onclick='edit("+rowIndex+");'>编辑</button>";
}
}
]],
toolbar : [
{text:"新增",iconCls:"icon-add",handler:function(){
if(editRow != undefined){
datagrid.datagrid('endEdit',editRow);
}else{
datagrid.datagrid('insertRow',{
index : 0,
row : {
}
});
changEditorAdd();
datagrid.datagrid('beginEdit',0);
editRow = 0;
}
}},
"-",
{text:"删除",iconCls:"icon-remove",handler:function(){
var rows = datagrid.datagrid('getSelections');
if(rows.length>0){
$.messager.confirm("请确认","你确定要删除所选择的的记录吗?",function(r){
if(r){
var ids = [];
for(var i=0;i<rows.length;i++){
ids.push(rows[i].id);
}
$.ajax({
url : sy.bp()+'/userController/remove.action',
data : {
ids : ids.join(',')
},
dataType : 'json',
success : function(r){
datagrid.datagrid('load');
datagrid.datagrid('unselectAll');
$.messager.show({title:"提示",msg:"删除成功"});
}
});
}
});
}else{
$.messager.alert("提示","请选择要删除的记录","warning");
}
}},
"-",
{text:"修改",iconCls:"icon-edit",handler:function(){
var rows = datagrid.datagrid('getSelections');
if(rows.length==1){
if(editRow != undefined){
datagrid.datagrid('endEdit',editRow);
}else{
changEditorEdit();
editRow = datagrid.datagrid('getRowIndex',rows[0]);
datagrid.datagrid('beginEdit',editRow);
}
}
}},
"-",
{text:"保存",iconCls:"icon-save",handler:function(){
datagrid.datagrid('endEdit',editRow);
}},
"-",
{text:"取消编辑",iconCls:"icon-redo",handler:function(){
editRow = undefined
datagrid.datagrid('rejectChanges');
datagrid.datagrid('unselectAll');
}},
],
onAfterEdit : function(rowIndex, rowData, changes){
var inserted = datagrid.datagrid('getChanges','inserted');
var updated = datagrid.datagrid('getChanges','updated');
if(inserted.length<1&&updated.length<1){
editRow = undefined;
datagrid.datagrid('unselectAll');
return;
}
var url = "";
if(inserted.length>0){
url = "/userController/add.action";
}
if(updated.length>0){
url = "/userController/edit.action";
}
$.ajax({
url : sy.bp()+url,
data : rowData,
dataType : 'json',
success : function(r){
if(r&&r.success){
datagrid.datagrid('acceptChanges');
$.messager.show({
title:'提示',
msg:"操作成功!"
});
}else{
datagrid.datagrid('rejectChanges');
$.messager.alert("错误",r.msg,"error");
}
editRow = undefined;
}
});
},
onDblClickRow: function(rowIndex, rowData){
if(editRow != undefined){
datagrid.datagrid('endEdit',editRow);
}else{
changEditorEdit();
datagrid.datagrid('beginEdit',rowIndex);
editRow = rowIndex;
}
},
//右键显示菜单
onRowContextMenu: function(e, rowIndex, rowData){
e.preventDefault();
$(this).datagrid('unselectAll');
$(this).datagrid('selectRow',rowIndex);
$('#menu').menu('show', {
left: e.pageX,
top: e.pageY
});
}
});
//改变表头文字对齐方式
$(".datagrid-header div").css("textAlign","left");
});
var search2 = function() {
//load会回到第一页,reload会停留在当前页,所以一般用load
datagrid.datagrid('load', getFormInput($('#searchForm')));
};
var clear2 = function(){
datagrid.datagrid('load', {});
$('#searchForm input').val('');
}
var getFormInput = function(form){
var o = {};
$.each(form.serializeArray(), function(index) {
if (o[this['name']]) {
o[this['name']] = o[this['name']] + "," + this['value'];
} else {
o[this['name']] = this['value'];
}
});
return o;
}
//扩展一个editor
$.extend($.fn.datagrid.defaults.editors, {
datetimebox: {
init: function(container, options){
var editor = $('<input/>').appendTo(container);
options.editable = false;
//变成datetimebox
editor.datetimebox(options);
return editor;
},
getValue: function(target){
return $(target).datetimebox('getValue');
},
setValue: function(target, value){
$(target).datetimebox('setValue',value);
},
resize: function(target, width){
$(target).datetimebox('resize',width);
},
destroy: function(target){
$(target).datetimebox('destroy');
}
}
});
//为datagrid添加方法
$.extend($.fn.datagrid.methods, {
addEditor : function(jq, param) {
if (param instanceof Array) {
$.each(param, function(index, item) {
var e = $(jq).datagrid('getColumnOption', item.field);
e.editor = item.editor;
});
} else {
var e = $(jq).datagrid('getColumnOption', param.field);
e.editor = param.editor;
}
},
removeEditor : function(jq, param) {
if (param instanceof Array) {
$.each(param, function(index, item) {
var e = $(jq).datagrid('getColumnOption', item);
e.editor = {};
});
} else {
var e = $(jq).datagrid('getColumnOption', param);
e.editor = {};
}
}
});
function changEditorAdd(){
datagrid.datagrid('addEditor',[
{
field: 'pwd',
editor: {
type:'validatebox',
options:{required:true}
}
},
{
field: 'name',
editor: {
type:'validatebox',
options:{required:true}
}
}
]);
datagrid.datagrid('removeEditor',['createdatetime','modifydatetime']);
}
function changEditorEdit(){
datagrid.datagrid('removeEditor',['pwd']);
datagrid.datagrid('addEditor',[
{
field: 'name',
editor: {
type:'validatebox',
options:{required:true}
}
},
{
field: 'createdatetime',
editor: {
type:'datetimebox',
options:{required:true}
}
},
{
field: 'modifydatetime',
editor: {
type:'datetimebox',
options:{required:true}
}
}
]);
}
function edit(rowIndex){
var row = datagrid.datagrid('getRows')[rowIndex];
alert(row.name);
}
</script>
</head>
<body>
<div class="easyui-layout" fit="true" border="false">
<div title="查询" region="north" style="height:110px;overflow:hidden">
<form id="searchForm">
<table id="queryTab" style="width:100%;height:100%;">
<tr>
<th align="right">用户名</th>
<td><input name="name"/></td>
</tr>
<tr>
<th align="right">创建日期</th>
<td>
<input name="createdatetimeStart" class="easyui-datetimebox" editable="fasle" style="width:155px"/>
至
<input name="createdatetimeEnd" class="easyui-datetimebox" editable="fasle" style="width:155px"/>
<a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="search2();">查询</a>
<a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-cut" plain="true" onclick="clear2();">清空</a>
</td>
</tr>
</table>
</form>
</div>
<div title="用户管理" region="center" border="false">
<table id="datagrid"></table>
</div>
<div id="menu" class="easyui-menu" style="width:120px;display:none;">
<div onclick="" iconCls="icon-add">增加</div>
<div onclick="" iconCls="icon-remove">删除</div>
<div onclick="" iconCls="icon-edit">修改</div>
</div>
</div>
</body>
</html>
相关推荐
`Datagrid-filter`插件则进一步增强了Grid的功能,通过添加过滤器,使用户可以根据预定义或自定义的条件对数据进行筛选,减少了手动查找特定信息的时间。 在实际应用中,`Datagrid-filter`插件的使用非常简单。`...
在本例中,我们关注的是一个名为"datagrid-dnd"的特性,这是一项允许用户通过拖放操作来重新排列数据网格行的功能。这个特性增强了用户交互性和数据管理的便利性,尤其适用于那些需要频繁调整数据顺序的场景。 首先...
在给定的标题"datagrid-groupview.js"中,我们可以看出这是一个针对jQuery EasyUI Datagrid组件的扩展,用于实现表格数据的分组显示功能。现在,我们将深入探讨这个知识点。 首先,jQuery EasyUI的Datagrid组件是一...
datagrid-filter 是一个与数据展示相关的前端组件,常用于表格数据的筛选和过滤。在这个特定的场景中,用户遇到了一个问题:当尝试向datagrid-filter插入数据时,组件会错误地显示两个相同的条目。这个问题可能是...
其中,datagrid是一个强大的表格控件,能够处理大量数据,支持分页、排序、过滤等功能。在这个场景中,我们关注的是如何将datagrid中的数据导出为Excel格式,以便于数据分析和共享。 导出到Excel通常涉及到两个关键...
首先,`datagrid-detailview.js`的核心功能是动态渲染和管理数据网格的详细信息视图。在传统的数据网格中,用户通常只能看到数据的基本信息,而`datagrid-detailview.js`允许用户通过点击行或图标来展开详细的子数据...
EasyUI提供了一套完整的组件,如表格(datagrid)、对话框、表单等,帮助开发者快速创建功能丰富的网页应用。在这个场景下,我们关注的是`datagrid`的几种视图(view):DetailView、BufferView、GroupView以及...
【标题】"datagrid-scrollview-demo" 是一个基于DataGrid组件的滚动视图示例项目,主要展示了如何在网页中实现数据表格的高效滚动浏览功能。DataGrid是前端开发中常用的一种展示大量数据的控件,它能够以表格的形式...
该"datagrid-export文件及pdf和Excel表格使用demo.rar"压缩包中包含了示例代码和演示,供开发者了解和学习如何使用datagrid-export功能。下载并解压后,你可以直接查看运行效果,这对于快速理解和上手这个库非常有...
jquery-easyui的扩展组件jquery-easyui-datagridview,其中的datagrid-detailview.js可方便地生成子网格,但是每行均默认生成展开按钮,实际我们希望对某些行不显示展开按钮,网上很多人提供的解决方案就是通过dom...
datagrid-export-filter.zip是一个压缩包,其中包含了用于EasyUI Datagrid的导出和过滤功能的JavaScript文件。EasyUI是一个基于jQuery的UI库,它为开发者提供了丰富的组件,包括表格(datagrid)、对话框、菜单等,...
5. **datagrid-export.js 和 datagrid-import.js**:这两个JavaScript文件分别对应于数据网格的导出和导入功能。JavaScript作为客户端脚本语言,常用于实现Web页面的动态交互。这些文件可能包含了处理导出和导入逻辑...
使用这个js,只需要一行代码即可实现easyui datagrid 导出到excel(之前在网上找了很多方法,看了很多文章,大部分实现这个功能都需要一大堆代码,几十行甚至上百行,这个一行代码解决他不香吗)
5. **操作功能** DataGrid内置了丰富的操作功能,如添加、编辑、删除行。这些功能可以通过设置`toolbar`选项来启用,同时配合`onBeforeEdit`、`onAfterEdit`等事件实现数据的增删改。 6. **排序和过滤** DataGrid...
在.NET框架中,Windows Presentation Foundation(WPF)是一种用于构建桌面应用程序的强大工具,它提供了丰富的用户界面和数据绑定功能。WPF Datagrid是WPF中一个重要的控件,用于显示和操作表格数据,类似于Windows...
在IT领域,EasyUI是一个基于JavaScript和HTML5的前端框架,它为开发人员提供了一组丰富的用户界面组件,包括datagrid、dialog、form等,用于构建交互式的Web应用。"datagrid-cellediting.zip"这个压缩包显然是针对...
5. **功能扩展**: - Datagrid 还支持行选择(singleSelect 或 multiSelect)、行编辑、行添加、行删除等功能,可以通过设置相应的配置项来启用。 6. **自定义列头**: - Datagrid 的列头可以根据需要自定义,...
然而,原生的easyUI可能并未内置详细的行展开功能,因此需要额外的插件如"datagrid-detailview"来扩展这种功能。 "datagrid-detailview.js"文件很可能是这个插件的核心代码,包含以下关键知识点: 1. **行展开机制...