<!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">
var datagrid;
var editRow = undefined;
$(function(){
datagrid = $("#datagrid").datagrid({
url : 'http://127.0.0.1:8001/sypro/userController/datagrid.action',
iconCls : "icon-save",
pagination : true,
pageSize : 10,
pageList : [10,20,30],
//fit属性让这个表格填充到父级容器中
fit : true,
//fitColumns让表格自动调整列的宽度，而不出现横向的滚动条
fitColumns : true,
//如果一个列的值太长，需要折行显示，就需要设置nowrap : false
nowrap : false,
border : false,
idField : "id",
sortName : "name",
sortOrder : "desc",
columns : [[
{title:"编号", field:"id", width:100, checkbox:true},
{title:"姓名", field:"name", width:100, sortable:true, editor:{type:'validatebox',options:{required:true}}},
{title:"密码", field:"password", width:200, editor:{type:'validatebox',options:{required:true}}},
{title:"创建时间", field:"createdatetime", width:200, editor:{type:'datetimebox',options:{required:true}}}
]],
toolbar : [
{text:"新增",iconCls:"icon-add",handler:function(){
if(editRow != undefined){
datagrid.datagrid('endEdit',editRow);
}else{
datagrid.datagrid('insertRow',{
index : 0,
row : {
}
});
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);
}
console.info(ids.join(','));
}
});
}else{
$.messager.alert("提示","请选择要删除的记录","error");
}
}},
"-",
{text:"修改",iconCls:"icon-edit",handler:function(){
var rows = datagrid.datagrid('getSelections');
if(rows.length==1){
if(editRow != undefined){
datagrid.datagrid('endEdit',editRow);
}else{
editRow = datagrid.datagrid('getRowIndex',rows[0]);
datagrid.datagrid('beginEdit',editRow);
}
}
}},
"-",
{text:"保存",iconCls:"icon-save",handler:function(){
console.info($.fn.datagrid.methods);
datagrid.datagrid('endEdit',editRow);
}},
"-",
{text:"取消编辑",iconCls:"icon-redo",handler:function(){
editRow = undefined
datagrid.datagrid('rejectChanges');
datagrid.datagrid('unselectAll');
}},
],
onAfterEdit : function(rowIndex, rowData, changes){
editRow = undefined
console.info(rowData);
},
onDblClickRow: function(rowIndex, rowData){
if(editRow != undefined){
datagrid.datagrid('endEdit',editRow);
}else{
datagrid.datagrid('beginEdit',rowIndex);
editRow = rowIndex;
}
}
});
});
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');
}
}
});
</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>
</body>
</html>
相关推荐
`Datagrid-filter`插件正是针对这种需求设计的，它是一个高效且实用的Grid插件，旨在提升数据网格的可操作性和用户交互性。这个插件的核心功能是为每一列提供过滤条件，使得用户能够快速筛选出所需的信息，极大地...
在本例中，我们关注的是一个名为"datagrid-dnd"的特性，这是一项允许用户通过拖放操作来重新排列数据网格行的功能。这个特性增强了用户交互性和数据管理的便利性，尤其适用于那些需要频繁调整数据顺序的场景。 首先...
在给定的标题"datagrid-groupview.js"中，我们可以看出这是一个针对jQuery EasyUI Datagrid组件的扩展，用于实现表格数据的分组显示功能。现在，我们将深入探讨这个知识点。 首先，jQuery EasyUI的Datagrid组件是一...
datagrid-cellediting.js
datagrid-filter 是一个与数据展示相关的前端组件，常用于表格数据的筛选和过滤。在这个特定的场景中，用户遇到了一个问题：当尝试向datagrid-filter插入数据时，组件会错误地显示两个相同的条目。这个问题可能是...
这个“datagrid-export.zip”文件提供了一种解决方案，使得开发者能够将EasyUI-datagrid中的数据按照其在界面上的样式，包括合并的单元格、复杂的表头、背景色和文字颜色等，方便地导出到Excel中，实现“所见即所得...
该文件是用来将easyui-datagrid按照格式导出到excel中，可以将合并的单元格，复杂的表头，背景色及字色等按照显示的样式导出到excel,即所见即所得
《datagrid-detailview.js：基于jQuery的高性能JS模板引擎在数据网格中的应用》 在Web开发领域，高效的数据展示是至关重要的，特别是在处理大量数据时。`datagrid-detailview.js`就是一个针对这种需求设计的jQuery...
支持datagrid扩展，在一条记录下面可以嵌套一个子datagrid，切记要在页面中引入该js
`datagrid-detailview.js`文件包含了实现这一功能的代码。使用DetailView，可以提高用户体验，让用户无需离开当前页面就能查看和操作详细信息。 2. **BufferView**： BufferView是一种优化大量数据加载的技术。在...
Easyui的扩展datagrid-dnd.js，实现拖动datagrid行到其他数据表格的必要文件
【标题】"datagrid-scrollview-demo" 是一个基于DataGrid组件的滚动视图示例项目，主要展示了如何在网页中实现数据表格的高效滚动浏览功能。DataGrid是前端开发中常用的一种展示大量数据的控件，它能够以表格的形式...
datagrid-export 是一个用于数据网格导出的工具，它支持将数据导出为PDF和Excel格式。这个工具在处理大量数据展示和数据交换时非常有用，特别是在Web应用中，用户可能需要将屏幕上的表格数据保存为便于查看和编辑的...
jquery-easyui的扩展组件jquery-easyui-datagridview，其中的datagrid-detailview.js可方便地生成子网格，但是每行均默认生成展开按钮，实际我们希望对某些行不显示展开按钮，网上很多人提供的解决方案就是通过dom...
easyui的datagridview拓展,使用方法看我的博文，网址：https://blog.csdn.net/qq_30907845/article/details/108963344
datagrid-export-filter.zip是一个压缩包，其中包含了用于EasyUI Datagrid的导出和过滤功能的JavaScript文件。EasyUI是一个基于jQuery的UI库，它为开发者提供了丰富的组件，包括表格（datagrid）、对话框、菜单等，...
近期在用datagrid-scrollview时，发现如果列数较少，不产生横向滚动条时，则不会触发虚拟滚动翻页的动作，只能查出第一批次的数据信息，经过大量的时间测试改善，发现需要改变源码中的判断条件。仅供参考