div 表格
来源：互联网 发布：mac谜案处小说百度云 编辑：程序博客网 时间：2024/06/03 02:27
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>CellEdit 单元格编辑 </title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <link href="../demo.css" rel="stylesheet" type="text/css" /> <script src="../../scripts/boot.js" type="text/javascript"></script> <script src="../../scripts/miniui/locale/en_US.js" type="text/javascript"></script> <!--<link href="../../scripts/miniui/themes/blue/skin.css" rel="stylesheet" type="text/css" />--> </head><body> <h1>CellEdit 单元格编辑</h1> <div style="width:800px;"> <div class="mini-toolbar" style="border-bottom:0;padding:0px;"> <table style="width:100%;"> <tr> <td style="width:100%;"> <a class="mini-button" iconCls="icon-add" onclick="addRow()" plain="true" tooltip="增加...">增加</a> <a class="mini-button" iconCls="icon-remove" onclick="removeRow()" plain="true">删除</a> <span class="separator"></span> <a class="mini-button" iconCls="icon-save" onclick="saveData()" plain="true">保存</a> </td> <td style="white-space:nowrap;"> <input id="key" class="mini-textbox" emptyText="请输入姓名" style="width:150px;" onenter="onKeyEnter"/> <a class="mini-button" onclick="search()">查询</a> </td> </tr> </table> </div> </div> <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" editNextOnEnterKey="true" editNextRowCell="true" > <div property="columns"> <div type="indexcolumn"></div> <div type="checkcolumn"></div> <div name="LoginName" field="loginname" headerAlign="center" allowSort="true" width="150" >员工帐号 <input property="editor" class="mini-textbox" style="width:100%;" minWidth="200" /> </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 name="birthday" 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:200px;" minWidth="200" minHeight="50"/> </div> <!--ComboBox：本地数据--> <div type="comboboxcolumn" autoShowPopup="true" name="gender" field="gender" width="100" allowSort="true" align="center" headerAlign="center">性别 <input property="editor" class="mini-combobox" style="width:100%;" data="Genders" /> </div> <!--ComboBox：远程数据--> <div type="comboboxcolumn" field="country" width="100" headerAlign="center" >国家 <input property="editor" class="mini-combobox" style="width:100%;" url="../data/countrys.txt" /> </div> <div type="checkboxcolumn" field="married" trueValue="1" falseValue="0" width="60" headerAlign="center">婚否</div> </div> </div> <script type="text/javascript"> var Genders = [{ id: 1, text: '男' }, { id: 2, text: '女'}]; mini.parse(); var grid = mini.get("datagrid1"); grid.load(); ////////////////////////////////////////////////////// function search() { var key = mini.get("key").getValue(); grid.load({ key: key }); } function onKeyEnter(e) { search(); } function addRow() { var newRow = { name: "New Row" }; grid.addRow(newRow, 0); grid.beginEditCell(newRow, "LoginName"); } 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=SaveEmployees", data: { data: json }, type: "post", success: function (text) { grid.reload(); }, error: function (jqXHR, textStatus, errorThrown) { alert(jqXHR.responseText); } }); } grid.on("celleditenter", function (e) { var index = grid.indexOf(e.record); if (index == grid.getData().length - 1) { var row = {}; grid.addRow(row); } }); grid.on("beforeload", function (e) { if (grid.getChanges().length > 0) { if (confirm("有增删改的数据未保存，是否取消本次操作？")) { e.cancel = true; } } });// grid.on("cellcommitedit", function (e) {// if (e.field == "loginname") {// if (e.value == "111") {// alert("不允许为111");// e.cancel = true;// }// }// });// grid.on('beforeload', function (e) {// if (grid.getChanges().length > 0) {// e.cancel = true;// alert('有未保存的数据');// }// }); </script> <div class="description"> <h3>Description</h3> <ul> <li>方向键导航单元格</li> <li>按回车键进入编辑</li> <li>按ESC键取消编辑</li> <li>按Tab键进入下一个单元格编辑</li> <li>editNextOnEnterKey="true"后，按回车键进入下一个单元格编辑</li> </ul> </div></body></html> 源 码 0 0
- div 表格
- Div表格原理與實作
- div做细线表格
- div 表格制作
- 表格，DIV，布局，渐变
- DIV+UL表格
- 表格转换div
- DIV repeater 全表格
- DIV+UL表格
- CSS+DIV 制作表格
- div+ul制作表格
- div写自适应表格
- div制作表格
- 今后输出表格之范例div表格
- CSS + DIV 实现表格效果
- div+css普通表格样式
- Div+CSS 制作漂亮表格
- DIV+CSS（表格制作）
- windows7下python 3.5安装numpy
- Android仿美团外卖点菜联动列表
- java画板粗实现
- mac下安装MySql,修改root密码,配置环境变量,设置默认字符集(mysql5.7.13)
- ubuntu16.04安装git和配置ssh
- div 表格
- Tyvj P1391 走廊泼水节
- 让开发效率爆表的Guava ---- Maps
- OpenGL — GLFW — 颜色
- 有return的情况下try catch finally的执行顺序（最有说服力的总结）
- 分布式服务框架 Zookeeper -- 管理分布式环境中的数据
- 看板与组织重组 1
- Android中的Fragment——02(Fragment的动态加载)
- 自己的一些车机app 界面
