jQuery MiniUI 开发教程 表格控件 表格编辑:行编辑器(十一)

jQuery MiniUI 开发教程 表格控件 表格编辑:行编辑器(十一)

参考示例:CRUD之:行编辑

一:创建单元格编辑器

<div id="datagrid1" class="mini-datagrid" style="width:700px;height:280px;"
url="../data/DataService.aspx?method=SearchEmployees"
>
<div property="columns">
<div name="action" width="120" headerAlign="center" align="center" renderer="onActionRenderer" cellStyle="padding:0;">#</div>
<div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号
<input property="editor" class="mini-textbox" />
</div>
<div field="gender" width="100" allowSort="true" renderer="onGenderRenderer" align="center" headerAlign="center">性别
<input property="editor" class="mini-combobox" style="width:100%;" data="[{id:1,text:'男'}, {id:2, text: '女'}]"/>
</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="createtime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">创建日期</div>
</div>
</div>
比如:mini-textbox的property为"editor",表示是此列的编辑器。

二:编辑操作

开始编辑行:
grid.beginEditRow(row);
取消编辑:
grid.cancelEdit();
提交编辑数据:

var rowData = grid.getEditRowData(row);
grid.loading("保存中,请稍后......");
var json = mini.encode([rowData]);
$.ajax({
url: "../data/DataService.aspx?method=SaveEmployees",
data: { employees: json },
success: function (text) {
grid.reload();
}, www.2cto.com
error: function (jqXHR, textStatus, errorThrown) {
alert(jqXHR.responseText);
}
});

分类:默认分类 时间:2012-01-03 人气:16
本文关键词:
分享到:

相关文章

  • jQuery MiniUI 快速入门:Hollo, world!(二) 2012-01-21

    我们开始编写第一个MiniUI程序,代码如下: <!DOCTYPE html /> <html> <head> <title> Hello MiniUI!</title> <!--jQuery js--> <script src="../jquery.js" type="text/javascript"></script> <!--MiniUI--> <link href="../t

  • jQuery MiniUI 开发教程 导航控件 OutlookBar:折叠面板组(七) 2012-03-01

    参考示例:OutlookBar:折叠面板组 创建OutlookBar <div id="outlookbar1" class="mini-outlookbar " activeIndex="0" style="width:180px;height:250px;" autoCollapse="true"> <div title="权限管理"> 1 </div> <div title="用户管理"> 2 </div> </div

  • jQuery MiniUI 开发教程 TreeGrid 节点拖拽(四) 2012-03-06

    TreeGrid:节点拖拽 参考示例: TreeGrid:节点拖拽 创建代码 <div id="treegrid1" class="mini-treegrid" style="width:600px;height:280px;" url="../data/tasks.txt" showTreeIcon="true" treeColumn="taskname" idField="UID" parentField="ParentTaskUID" resultAsTree="false" all

  • jQuery MiniUI 开发教程 树形控件 创建树:树形结构(一) 2012-03-27

    参考示例:Tree 树形控件 创建Tree <ul id="tree1" class="mini-tree" url="../data/tree.txt" style="width:300px;padding:5px;" showTreeIcon="true" textField="text" idField="id" > </ul> 数据结构:树形 通过url返回的数据结构如下: [ {id: "base", text: "Base", expanded: false,

  • jQuery MiniUI 开发教程 主框架布局之:Menu 2012-03-29

    一:创建界面布局 <!--Layout--> <div id="layout1" class="mini-layout" style="width:100%;height:100%;"> <div class="header" region="north" height="70" showSplit="false" showHeader="false"> </div> <div title="south" region="south" sho

  • jQuery MiniUI 开发教程 主框架布局之:Tree(三) 2012-07-04

    一:创建界面布局 <!--Layout--> <div id="layout1" class="mini-layout" style="width:100%;height:100%;"> <div class="header" region="north" height="70" showSplit="false" showHeader="false"> </div> <div title="south" region="south" sho

  • jQuery MiniUI 开发教程 导航控件 Menu:菜单(二) 2012-08-01

    创建菜单 <ul id="menu1" class="mini-menubar" style="width:100%;" url="../data/listMenu.txt" idField="id" parentField="pid"> </ul> url数据格式 [ { id: "1", text: "文件(F)"}, '-', { id: "2", text: "新建", iconCls: "icon-new", pid: "1"}, { id: "3", text

  • jQuery MiniUI 开发教程 表格控件 表格编辑:单元格编辑验证(十四) 2012-11-18

    参考示例:单元格编辑验证 一:设置编辑器验证规则 <div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号 <input property="editor" class="mini-textbox" style="width:100%;" required="true" vtype="email" /> </div> 使用编辑器的vtype和onvalidatio

  • jQuery MiniUI 开发教程 导航控件 OutlookMenu:折叠菜单(八) 2012-12-03

    参考示例:OutlookMenu:折叠菜单 创建OutlookMenu <div class="mini-outlookmenu" url="../data/outlookmenu.txt" onitemselect="onItemSelect" idField="id" parentField="pid" textField="text"> </div> 数据结构 [ { id: "user", text: "用户管理"}, { id: "addUser", pid:

Copyright (C) quwantang.com, All Rights Reserved.

趣玩堂 版权所有 京ICP备15002868号

processed in 0.064 (s). 10 q(s)