nikofan
- 浏览: 230241 次
- 性别:
- 来自: 上海
-
最新评论
-
pealing1985：
受教了，，不知道实际的开发中 jquery ui 用的多吗。。 ...
jQuery MiniUI 开发教程 树形控件 树操作：增加、删除、修改、移动（六） -
nikofan：
IE6下没有问题
jQuery MiniUI 开发教程 表格控件 表格编辑：表单编辑（十二） -
hgztx：
这个系列的控件对IE6 的支持怎么样？有没有试过会有内存溢出的 ...
jQuery MiniUI 开发教程 表格控件 表格编辑：表单编辑（十二） -
jacking124：
这个用起来怎么样了，！！
jQuery MiniUI 开发教程 表格控件 表格：过滤行（七） -
masuweng：
界面、按钮都不错！
jQuery MiniUI 开发教程 表单控件 表单：控件尺寸调整（四）
文章列表
表格：右键菜单
参考示例：右键菜单
一：创建ContextMenu
<ul id="gridMenu" class="mini-contextmenu" onbeforeopen="onBeforeOpen">
<li name="add" iconCls="icon-add" onclick="onAdd">新增</li>
<li name="edit" iconC ...
单元格编辑验证
参考示例：单元格编辑验证
一：设置编辑器验证规则
<div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号
<input property="editor" class="mini-textbox" style="width:100%;" required="true" vtype=" ...
CRUD之：弹出面板编辑
参考示例：CRUD之：弹出面板编辑
一：创建弹出编辑面板
<div id="editWindow" class="mini-window" title="Window" style="width:650px;"
showModal="true" allowResize="true" allowDrag="true">
<div id="editform" class=&q ...
CRUD之：行内表单编辑
参考示例：CRUD之：行内表单编辑
一：创建编辑表单
<div id="editForm1" style="display:none;padding:5px;position:relative;">
<input class="mini-hidden" name="id"/>
<table style="width:100%;">
<tr>
<td styl ...
CRUD之：行编辑
参考示例：CRUD之：行编辑
一：创建单元格编辑器
<div id="datagrid1" class="mini-datagrid" style="width:700px;height:280px;"
url="../data/DataService.aspx?method=SearchEmployees">
<div property="columns">
<div name="action&q ...
CRUD之：单元格编辑
参考示例：单元格编辑
一：创建单元格编辑器
<div id="datagrid1" class="mini-datagrid" style="width:800px;height:280px;"
url="../data/AjaxService.aspx?method=SearchEmployees" idField="id"
allowResize="true" pageSize="20"
a ...
详细行
参考示例：详细行
表格的"showRowDetail"方法可以为一个普通表格行增加了一个详细行。
通过"getRowDetailCellEl"方法获得此详细行的DOM元素后，可以在此详细行DOM元素内加入任何HTML内容。
function onShowRowDetail(e) {
var grid = e.sender;
var row = e.record;
var td = grid.getRowDetailCellEl(row);
$.ajax({
url: "../da ...
表格：汇总行
参考示例：汇总行
Javascript处理
通常在表格的"load"数据加载完成事件中，更新表格的汇总信息：
grid.on("load", onGridLoad);
function onGridLoad(e) {
var result = e.result;
var grid = e.sender;
var cellEl = grid.getSummaryCellEl("ageColumn");
cellEl.style.cssText = "text-align:r ...
表格：过滤行
参考示例：行过滤
一：定义过滤器
设置表格"showFilter"属性为"true"后，可以在列配置对象上定义过滤器对象：
<div field="name" width="120" headerAlign="center" allowSort="true">姓名
<!--定义此列的过滤器对象，注意property="filter"-->
<input id="nameFilter ...
表格：显示/隐藏列
参考示例：显示/隐藏列
通过设置表格的showColumn和hideColumn方法，可以显示、隐藏表格列。
给列对象设置一个name：
<div name="loginnameColumn" field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号</div>
在运行时调用方法显示和隐藏列：
//显示列
grid.showColumn("log ...
表格：锁定列
参考示例：锁定列
通过设置表格的frozenStartColumn和frozenEndColumn属性，可以锁定住表格列：
grid.setFrozenStartColumn(0);
grid.setFrozenEndColumn(1);
表格：多表头
参考示例：多表头
通过给"column"对象设置下一级"columns"列集合对象，轻松实现任意层级的多表头。如下代码：
<div id="datagrid1" class="mini-datagrid" style="width:700px;height:280px;"
url="../data/DataService.aspx?method=SearchEmployees" >
<div property=" ...
表格：自定义单元格
参考示例：自定义单元格
监听处理"drawcell"事件
使用"drawcell"事件，可以自定义单元格内容、样式、行样式等。
grid.on("drawcell", function (e) {
var record = e.record,
column = e.column,
field = e.field,
value = e.value;
//格式化日期
if (field == "birthday") {
...
表格：自定义列
参考示例：数据表格 分页表格
表格列配置集合( columns )，是一个数组，如：[column, column, ...]。
其中一个column的配置参数如下表：
Name Type Description Default
header String 表头列文本
field String 单元格值字段
name String 列标识名称
width Number 列宽度
headerAlign String 表头列文本位置。left/center/right。 left
align String 单元格文本位置。left ...
数据表格
参考示例：数据表格 分页表格
一：创建表格
<div id="datagrid1" class="mini-datagrid" style="width:700px;height:280px;"
url="../data/DataService.aspx?method=SearchEmployees" idField="id" allowResize="true">
<div property="column ...