CRUD之:单元格编辑
参考示例:
单元格编辑
一:创建单元格编辑器
<div id="datagrid1" class="mini-datagrid" style="width:800px;height:280px;"
url="../data/AjaxService.aspx?method=SearchEmployees" idField="id"
allowResize="true" pageSize="20"
allowCellEdit="true" allowCellSelect="true" multiSelect="true">
<div property="columns">
<div type="checkcolumn"></div>
<div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号
<input property="editor" class="mini-textbox" style="width:100%;"/>
</div>
<div field="gender" width="100" renderer="onGenderRenderer" align="center" headerAlign="center">性别
<input property="editor" class="mini-combobox" style="width:100%;" data="Genders"/>
</div>
<div field="age" width="100" allowSort="true" >年龄
<input property="editor" class="mini-spinner" minValue="0" maxValue="200" value="25" style="width:100%;"/>
</div>
<div field="birthday" width="100" allowSort="true" dateFormat="yyyy-MM-dd">出生日期
<input property="editor" class="mini-datepicker" style="width:100%;"/>
</div>
<div field="remarks" width="120" headerAlign="center" allowSort="true">备注
<input property="editor" class="mini-textarea" style="width:100%;" minHeight="80"/>
</div>
<div field="createtime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">创建日期</div>
</div>
</div>
设置allowCellEdit和allowCellSelect后,表格为单元格编辑模式。
二:编辑操作
增加行:
function addRow() {
var newRow = { name: "New Row" };
grid.addRow(newRow, 0);
}
删除行:
function removeRow() {
var rows = grid.getSelecteds();
if (rows.length > 0) {
grid.removeRows(rows, true);
}
}
保存数据:
function saveData() {
//获得增加、删除、修改的记录集合
var data = grid.getChanges();
var json = mini.encode(data);
grid.loading("保存中,请稍后......");
$.ajax({
url: "../data/AjaxService.aspx?method=SaveChangedEmployees",
data: { data: json },
type: "post",
success: function (text) {
grid.reload();
},
error: function (jqXHR, textStatus, errorThrown) {
alert(jqXHR.responseText);
}
});
}
三:服务端处理
public void SaveChangedEmployees()
{
String json = Request["data"];
ArrayList rows = (ArrayList)PluSoft.Utils.JSON.Decode(json);
foreach (Hashtable row in rows)
{
//根据记录状态,进行不同的增加、删除、修改操作
String state = row["_state"] != null ? row["_state"].ToString() : "";
if(state == "added")
{
row["createtime"] = DateTime.Now;
new TestDB().InsertEmployee(row);
}
else if (state == "removed" || state == "deleted")
{
String id = row["id"].ToString();
new TestDB().DeleteEmployee(id);
}
else if (state == "modified")
{
new TestDB().UpdateEmployee(row);
}
}
}
分享到:
相关推荐
jQuery MiniUI - 快速开发WebUI。 它能缩短开发时间,减少代码量,使开发者更专注于业务和服务端,轻松实现界面开发,带来绝佳的用户体验。 使用MiniUI,开发者可以快速创建Ajax无刷新、B/S快速录入数据、CRUD、...
strust1+JQUERY做了个CRUD的源码和数据库
使用Struts2和jQuery EasyUI实现简单CRUD系统
jTable - 一个JQuery插件创建基于AJAX的CRUD表
cruddemo:Spring Boot Crud API
jquery table crud
Ajax-laravel-jquery-ajax-crud.zip,用jquery的ajax特性简单实现laravel crud,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分...
单页应用程序C# ASP.NET MVC 5 引导程序查询JQUERY-AJAX 完整 SPA 应用程序的示例,使用 AJAX-JQUERY 工具在 ASP.NET MVC 5 后端实时进行 CRUD 操作(创建、读取、更新和删除)。 这是我为 .NETCoders、 社区撰写的...
:party_popper: ElementProCrud :party_popper:ElementProCrud 快速搭建 CRUD 的利器DocumentationDemoInstallNPMnpm i element-pro-crud -s完整引入import Vue from 'vue';import ElementProCrud from 'element-pro...
jtable, 创建基于AJAX的CRUD表的JQuery插件 什么是 jTablehttp://www.jtable.org jTable是一个用于在不编码HTML或者Javascript的基础上创建基于AJAX的CRUD表的jQuery插件。 它具有以下几个特性:自动创建 HTML ta
plantilla_CRUD2021:plantilla HTML del curso CRUD 2021
Laravel 6 Ajax CRUD教程 您可以按照Laravel 6 Ajax CRUD的分步教程进行操作: ://itsolutionstuff.com/post/laravel-6-ajax-crud-tutorialexample.html
CRUDDemo:Asp.net核心应用
通过DOM4j实现xml文件中数据的增删改查,xml文件就类似于数据库
创建您的第一个CRUD资源: // src/store/articles import createCrudModule from 'vuex-crud' ; export default createCrudModule ( { resource : 'articles' } ) ; 在商店中注册您的CRUD资源: // src/store/...
简单容易方便,这是用jquery easyui 实现的crud
用法gem旨在提供一组类,以为给定数量MySQL实体生成简单MySQL / Memcached支持的RESTful CRUD API。入门你应该有: MySQL数据库(可选)可用的Memcached实例。 一个空的Sinatra应用程序班级达尔Dal实例为特定MySQL表...
CRUD2020:Victor Daniel Roque Garcia-SIS22B
_排队 使用PHP MySQL和jQuery Ajax进行内联CRUD 来源: : Suharjoko编辑-Github上的JQ:trade_mark:Direct 分支机构:(仅)“ Master @ GitHub”,用于从家庭(R554)和Office(JPFK)轻松同步
一个CRUD应用程序,它使用reqres API在React中编辑用户记录。 构建设置和登录说明 # install project $ git clone https://github.com/CyberIkshit/crud_app.git # open app directory $ cd crud-app # install ...