<!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 : 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},
{title:"密码", field:"pwd", width:200},
{title:"创建时间", field:"createdatetime", width:200},
{title:"最后修改时间", field:"modifydatetime", width:200}
]],
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');
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;
}
}
});
});
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}
}
}
]);
}
</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-scrollview-demo" 是一个基于DataGrid组件的滚动视图示例项目，主要展示了如何在网页中实现数据表格的高效滚动浏览功能。DataGrid是前端开发中常用的一种展示大量数据的控件，它能够以表格的形式...
- Datagrid是WPF中的一个数据展示控件，它允许用户以表格形式查看和编辑数据。 - Datagrid提供了多种特性，如排序、分组、过滤、列自定义等，便于数据的展示和管理。 2. **数据绑定** - 在WPF中，数据绑定是核心...
2. `datagrid-cellediting.js`：这是一个JavaScript文件，通常包含了处理datagrid编辑功能的逻辑代码。这可能包括初始化datagrid，监听单元格的编辑事件，以及保存或验证用户编辑的数据的方法。文件中可能还定义了与...
JavaScript主要负责处理用户交互，如点击编辑按钮触发编辑模式，保存按钮提交更改，以及取消按钮恢复原始数据。CSS则用于美化编辑状态下的行，例如添加编辑图标，调整单元格样式等。在提供的资源中，js文件包含了...
在Flex4.6中，DataGrid支持两种编辑模式：cell editing（单元格编辑）和row editing（行编辑）。这个项目主要涉及后者，允许用户一次编辑整行数据。 二、ComboBox控件嵌入 ComboBox控件是一个下拉列表选择框，用户...
### EasyUI Datagrid 编辑模式详解 #### 一、EasyUI Datagrid 概述 EasyUI 是一款基于 jQuery 的用户界面插件集合，它提供了丰富的 UI 控件，包括 datagrid，可以方便地构建出复杂的数据展示表格。Datagrid 是 ...
4. **保存编辑结果**：当离开编辑模式时，保存当前单元格中的文本到实际的数据源中。 5. **更新模式管理**：为了避免无限递归的问题，需要在保存编辑结果后设置一个标志位 `inUpdateMode` 表示正在更新过程中。 6....
默认情况下，DataGrid在用户双击单元格时进入编辑模式，但有时我们希望用户只需单击就能开始编辑，这能提高用户体验。 **二、单击编辑的实现** 要使DataGrid在单击单元格时进入编辑状态，我们需要覆盖其默认行为。...
在标题“easyui datagrid在编辑状态下更新列的值”中，我们关注的是如何在Datagrid的编辑模式下动态地修改列的值，以及确保在编辑结束后，保存的数据反映这些变更。以下将详细介绍这一过程。 首先，EasyUI的...
6. **编辑与增删**：用户可以直接在表格内进行数据编辑，DataGrid JS通常提供行级别的编辑模式，也支持插入新行和删除行的操作。 7. **扩展性**：这个库允许开发人员通过插件或自定义函数扩展其功能，例如添加拖放...
在Windows Presentation Foundation (WPF) 中，MVVM（Model-View-ViewModel）是一种设计模式，它将业务逻辑、用户...总之，结合MVVM模式和DataGrid控件，开发者可以在WPF应用中创建出强大而灵活的数据展示和编辑界面。
在C# WPF环境中，DataGrid控件是一个非常强大的数据展示和编辑工具，它允许用户以表格形式查看和操作数据。在开发过程中，有时我们需要实现一个功能，即允许用户通过拖拽行来改变DataGrid中数据的显示顺序。这个功能...
4. **可编辑表格的性能问题**：当表格允许编辑时，即便数据量不大（如几十条记录），操作也可能变得十分卡顿，尤其是IE浏览器中的表现更差。 #### 加载大数据量时的性能问题及解决方案 **原因分析**： - 不考虑...
在默认情况下，DataGrid只是显示数据，但通过启用“可编辑”模式，用户可以直接在表格单元格内修改数据，提高数据输入的效率和用户体验。这种特性在需要频繁更新或输入数据的应用场景中非常有用，例如在线表单、...
你可以在这个事件中启动编辑模式。例如： ```javascript $('#dg').datagrid({ onDblClickRow: function(index, row){ $(this).datagrid('beginEdit', index); } }); ``` 3. **onBeforeEdit** 和 **...
总结起来，要在DataGrid中添加新行，需要处理分页逻辑、编辑模式的切换，以及确保在适当的时候允许用户添加新行。此外，还要处理可能的用户体验问题，如防止重复添加和错误的编辑状态。以上的方法提供了一个有效的...
在EasyUI 1.5版本中，DataGrid的编辑功能通常包括单元格编辑、行编辑和弹出式编辑三种模式，可以根据实际需求选择合适的方式。 1. 单元格编辑：用户点击某个单元格时，该单元格变为可编辑状态，编辑完成后保存更改...
EasyUI 提供了行编辑功能，通过点击行或者单元格来激活编辑模式。编辑完成后，用户提交更改，这同样通过 AJAX 完成，更新服务器上的数据。 最后，删除（Delete）数据则是选中一行后，确认删除操作，DataGrid 将发送...
5. **编辑模式**：在MVVM中，实现DataGrid的编辑功能通常通过DataGrid的`EditingElementStyle`和`EditingElementTemplate`属性。你可以为每个列定义一个`EditingTemplate`，其中包含一个TextBox或其他输入控件，用于...
4. **行内编辑**：通过设置 `onDblClickRow` 或 `onClickRow` 事件，实现当用户双击或单击行时进入编辑模式。编辑控件（如输入框）将显示在单元格中，编辑完成后通过调用 `saveRow` 方法保存更改。 5. **增删改查...