1、DataGrid
$J.getDataGrid来获取grid对象
a、后台数据:key=”total”,value=“数据数量”;key=”data”,value=“数据集合List”
b、field对应后端field="id";field="name";field="age"
Jsp
在页面定义如下信息:
<div id="data" class="nui-datagrid"
style="width: 1000px; height: 600px;" allowResize="true"
url="<%=request.getContextPath()%>/studentCtrler/showFound.do"
idField="id" multiSelect="true" pageSize="5" pageIndex="0">
<div property="columns">
<div type="indexcolumn"></div>
<div type="checkcolumn"></div>
<div field="id" width="120" headerAlign="center" allowSort="true">帐号</div>
<div field="name" width="120" headerAlign="center" allowSort="true">姓名</div>
<div field="age" width="120" headerAlign="center" allowSort="true">年纪</div>
</div>
</div>
url返回数据
{"total":5,
"data":[
{"id":"1","name":"张三","age":"21"},
{"id":"2","name":"朱明","age":"23"},
{"id":"4","name":"周兰","age":"31"},
{"id":"5","name":"徐鸣","age":"28"},
{"id":"3","name":"谢忠哲","age":"25"}
]
}
属性:
名称 | 类型 | 描述 | 默认 |
columns | Array | 列集合对象 | 无 |
url | String | 数据加载地址 | 无 |
idField | String | 行数据唯一字段. | 无 |
virtualScroll | Boolean | 是否虚拟滚动.当显示的数据超过500以上时,请设置此属性,能极大提升性能 | false |
pageIndex | Number | 页码 | 0 |
pageSize | Number | 每页多少条 | 10 |
sortField | String | 排序字段,按哪个字段进行排序 | 无 |
sortOrder | asc,desc | 排序方向(升序,降序) | 无 |
totalCount | Number | 总记录数 | 无 |
allowUnselect | Boolean | 允许反选. | false |
selectOnLoad | Boolean | 加载完是否自动选中 | false |
showEmptyText | Boolean | 数据为空时显示提示文本 | false |
emptyText | String | 数据为空时的提示文本 | 无 |
totalField | String | 总记录数名 | total |
dataField | String | 数据名 | data |
showColumnsMenu | Boolean | 显示列菜单.实现显示、隐藏列 | false |
方法:
在使用方法的时候,需要先用$J 获取到对象,如$J. get (id),再使用方法.
名称 | 参数 | 描述 | 返回值 |
reload ( ) | 无 | 重新加载数据 | 无 |
gotoPage(index, size) | Index代表当前页, size代表显示的条数 | 跳转页码
| 无 |
sortBy ( sortField, sortOrder ) | sortField代表根据什么字段排序, sortOrder升序的方式 | 排序字段 | 无 |
clearSort ( ) | 无 | 取消排序 | 无 |
groupBy ( field, dir ) | field字段id,dir排序 | 分组.比如:grid.groupBy(“city”, “desc”) | 无 |
clearGroup ( ) | 无 | 取消分组 | 无 |
collapseGroups ( ) | 无 | 折叠所有分组 | 无 |
expandGroups ( ) | 无 | 展开所有分组 | 无 |
isEditing ( ) | 无 | 是否有行编辑 | Boolean |
updateRow ( row, rowData ) | row选中行对象 更新的行数据 | 更新行(JavaScript) | 无 |
removeRow ( row, autoSelect ) | row选中行对象 autoSelect 自动选中,参数为boolean | 删除行(JavaScript).autoSelect为true,则删除记录后,自动选择下一条记录 | 无 |
addRows ( rows, index ) | rows行对象,index索引 | 增加多行(Javascript) | 无 |
moveRow ( row, index ) | rows行对象,index索引 | 移动行(Javascript) | 无 |
moveUp ( Array ) | array集合对象 | 上移 | 无 |
moveDown ( Array ) | array集合对象 | 下移 | 无 |
indexOf ( row ) | row选中行对象 | 获取行索引号 | 无 |
isSelected ( row ) | row选中行对象 | 是否选中行 | 无 |
getSelecteds ( ) | 无 | 获取所有选中的行 | 无 |
setSelected ( row ) | 无 | 设置当前选中行 | 无 |
deselect ( row ) | row选中行对象 | 取消选中行 | 无 |
selectAll ( ) | 无 | 选中所有行 | 无 |
selects ( rows ) | 无 | 选中多行 | 无 |
deselects ( rows ) | row选中行对象数组 | 取消选中多行 | 无 |
showAllRowDetail ( ) | 无 | 显示所有行详细 | 无 |
hideAllRowDetail ( ) | 无 | 隐藏所有行详细 | 无 |
showRowDetail ( row ) | row行对象 | 显示行详细 | 无 |
hideRowDetail ( row ) | row行对象 | 隐藏行详细 | 无 |
isShowRowDetail ( row ) | 无 | 是否显示了行详细 | 无 |
updateColumn ( column, Object ) | column列对象,object json对象 | 更新列内容.例如:grid.updateColumn(“name”, {header: “姓名”}); | 无 |
validate ( ) | 无 | 验证表格所有单元格 | 无 |
isValid ( ) | 无 | 是否验证通过 | Boolean |
事件:
名称 | 参数 | 描述 |
columnschanged | 无 | 列改变时激发.如列显示/隐藏、列宽调整、列增加/删除等情况 |
rowclick | { sender: Object, //表格对象 record: Object //行对象 } | 行点击时发生 |
rowdblclick | { sender: Object, //表格对象 record: Object //行对象 } | 行双击时发生 |
rowmousedown | { sender: Object, //表格对象 record: Object //行对象 } | 行鼠标按下时发生 |
cellclick | { sender: Object, //表格对象 record: Object, //行对象 column: Object //列对象 } | 单元格点击时发生 |
cellmousedown | { sender: Object, //表格对象 record: Object, //行对象 column: Object //列对象 } | 单元格鼠标按下时发生 |
headercellclick | { sender: Object, //表格对象 column: Object //列对象 } | 表头单元格点击时发生 |
headercellmousedown | { sender: Object, //表格对象 column: Object //列对象 } | 表头单元格鼠标按下时发生 |
beforeload | 无 | 数据加载前发生 |
loaderror | { sender: Object, //表格对象 xmlHttp: Object, //ajax对象 errorMsg: String //错误信息 errorCode: int //错误码 } | 数据加载错误时发生 |
cellbeginedit | { sender: Object, rowIndex: Number, record: Object, column: Object, field: String, editor: Object, value: String, cancel: false } | 编辑开始前发生 |
selectionchanged | 无 | 行选择改变时发生 |
列对象属性:
名称 | 参数 | 描述 | 默认值 |
header | String | 表头列文本 | 无 |
field | String | 单元格值字段 | 无 |
name | String | 列标识名称 | 无 |
width | Number | 列宽度 | 无 |
visible | Boolean | 是否显示 | 无 |
headerAlign | String | 表头列文本位置.left/center/right. | left |
align | String | 单元格文本位置.left/center/right. | left |
headerCls | String | 表头列样式类. | 无 |
cellCls | String | 单元格样式类 | 无 |
headerStyle | String | 表头列样式 | 无 |
cellStyle | String | 单元格样式 | 无 |
dataType | string|int|float|date|boolean|currency | 数据类型,为客户端排序所用. | string |
currencyUnit | String | 货币单位.当dataType=“currency”有用.如:¥432,432.00. | 无 |
dateFormat | String | 日期格式化.如:yyyy-MM-dd HH:mm:ss. | 无 |
vtype | String | 验证规则,如required,email,url等.具体参考这里. | false |
defaultValue | 无 | 默认值.编辑时如果没有数据,则采用defaultValue默认值. | 无 |
defaultText | 无 | 默认文本. | 无 |
2、Tree
a、dataField 对应后端dataField ="treeNodes"
b、idField对应后端idField="id";
c、parentField对应后端parentField="pid",parentField值为父节点的id值
jsp
<ul id="tree1" class="nui-tree" url="displayAddDialog.do" style="width:300px;padding:5px;"
textField="text" dataField="treeNodes" idField="id" parentField="pid"
onnodeselect="onNodeSelect" showTreeIcon="true" resultAsTree="false" >
</ul>
URL返回数据
{treeNodes:
[
{id: "base", text: "Base", expanded: false},
{id: "ajax", text: "Ajax", pid: "base"},
{id: "json", text: "JSON", pid: "base"},
{id: "date", text: "Date", pid: "base"},
{id: "control", text: "Control", pid: "base"},
......
]
}
属性:
名称 | 类型 | 描述 | 默认 |
idField | String | 值字段 | id |
textField | String | 节点文本字段 | text |
iconField | String | 图标字段 | iconCls |
parentField | String | 父节点字段 | pid |
checkRecursive | Boolean | 是否联动选择父子节点.比如选中父节点,自动全选子节点 | false |
expandOnLoad | Boolean/Number | 加载后是否展开.比如:true展开所有节点;0展开第一级节点.以此类推 | false |
showCheckBox | Boolean | 允许Check模式选中节点 | false |
allowLeafDropIn | Boolean | 是否允许拖拽投放到子节点内 | false |
allowDrag | Boolean | 是否允许拖拽节点 | false |
allowDrop | Boolean | 是否允许投放节点 | false |
方法:
在使用方法的时候,需要先用$J 获取到对象,如$J. get (id),再使用方法.
名称 | 参数 | 描述 | 返回值 |
getRootNode ( ) | 无 | 获取根节点 | Object |
getParentNode ( node ) | node节点对象 | 获得父节点 | Object |
getChildNodes ( node ) | node节点对象 | 获得子节点集合 | Array |
getAllChildNodes ( node ) | node节点对象 | 获得所有子节点集合 | Array |
getLevel ( node ) | node节点对象 | 获得节点层级 | Number |
isCheckedNode ( node ) | node节点对象 | 是否Check选中的节点 | Boolean |
isVisibleNode ( node ) | node节点对象 | 是否显示节点 | Boolean |
isEnabledNode ( node ) | node节点对象 | 是否启用节点 | Boolean |
eachChild ( node, fn, scope ) | node节点对象 | 遍历下一级子节点 | 无 |
removeNodes ( nodes ) | node节点对象组 | 删除多个节点 | 无 |
addNode ( node, index, parentNode ) | index索引parentNode父节点 | 加入节点 | 无 |
updateNode ( node, options ) | node节点对象,options json串 | 更新节点内容.比如:tree.updateNode(node, {text: “abc”}) | 无 |
moveNode( node, targetNode, action) | argetNode移动到的目标节点, | 移动节点.action值:before|after|add | 无 |
setNodeText ( node, String ) | node节点对象,string 字符串 | 设置节点文本 | 无 |
setNodeIconCls ( node, String) | node节点对象,string 字符串 | 设置节点图标 | 无 |
getNode ( value ) | value传入值 | 根据值获取节点对象 | 无 |
hideNode ( node ) | node节点 | 隐藏节点 | 无 |
showNode ( node ) | node节点 | 显示节点 | 无 |
enableNode ( node ) | node节点 | 启用节点 | 无 |
disableNode ( node ) | node节点 | 禁用节点 | 无 |
expandNode ( node ) | node节点 | 展开节点 | 无 |
collapseNode ( node ) | node节点 | 收缩节点 | 无 |
expandLevel ( Number ) | Number层次数 | 展开层次节点 | 无 |
expandAll ( ) | 无 | 展开所有节点 | 无 |
collapseAll ( ) | 无 | 收缩所有节点 | 无 |
selectNode ( node ) | node节点 | 选中节点 | 无 |
getSelectedNode ( ) | 无 | 获取选中的节点 | 无 |
uncheckNode ( node ) | node节点 | 取消Check多选节点 | 无 |
checkNodes ( nodes ) | node节点组 | Check多选多个节点 | 无 |
checkAllNodes ( ) | 无 | Check多选所有节点 | 无 |
uncheckAllNodes ( ) | 无 | 取消Check多选所有节点 | 无 |
getCheckedNodes ( haveParent ) | haveParent: Boolean.是否包含父节点. | 获取Check选中的多个节点 | 无 |
事件:
名称 | EventObject | 描述 |
nodedblclick | { sender: Object, //树对象 node: Object, //节点对象 isLeaf: Boolean } | 节点双击时发生 |
nodeclick | { sender: Object, //树对象 node: Object, //节点对象 isLeaf: Boolean } | 节点点击时发生 |
nodemousedown | { sender: Object, //树对象 node: Object, //节点对象 isLeaf: Boolean } | 节点鼠标按下时发生 |
beforenodeselect | { sender: Object, //树对象 node: Object, //节点对象 isLeaf: Boolean, cancel: false } | 选择节点前发生 |
beforeload | 无 | 数据加载前发生 |
loaderror | { sender: Object, //树对象 xmlHttp: Object, //ajax对象 errorMsg: String //错误信息 errorCode: int //错误码 } | 数据加载错误时发生 |
loadnode | { sender: Object, //树对象 node: Object //节点对象 } | 节点加载成功时发生 |
beforenodecheck | { sender: Object, //树对象 node: Object, //节点对象 isLeaf: Boolean, checked: Boolean,//Check状态 cancel: false } | Check选择前发生 |
nodecheck | { sender: Object, //树对象 node: Object, //节点对象 isLeaf: Boolean } | Check选择时发生 |
beforeexpand | { sender: Object, //树对象 node: Object } | 展开节点前发生 |
expand | { sender: Object, //树对象 node: Object } | 展开节点后发生 |
beforecollapse | { sender: Object, //树对象 node: Object } | 折叠节点前发生 |
collapse | { sender: Object, //树对象 node: Object } | 折叠节点后发生 |
drop | { sender: Object, //树对象 dragNode: Object, //拖拽的节点 dropNode: Object, //目标投放节点 dragAction: String//投放方式:add/after/before } | 拖拽投放时发生 |
3、TreeGrid
a、dataField 对应后端dataField ="trees"
b、idField对应后端idField="uid"
c、parentField对应后端parentField="parentTaskUID",parentField值为父节点的uid值'
d、treeColumn对应前端name的值,treeColumn="taskname",表示该列是节点列并添加图标
e、resultAsTree为false则显示为树的形态
f、field对应后端field="percentComplete";field="duration";field="start";field="finish"
jsp
<div id="treegrid1" class="nui-treegrid" style="width:700px;height:280px;" url="<%=request.getContextPath()%>/studentCtrler/testNavig.do"
dataField="trees" idField="uid" parentField="parentTaskUID" treeColumn="taskname"
resultAsTree="false" allowResize="true" expandOnLoad="true" showTreeIcon="true">
<div property="columns">
<div type="indexcolumn"></div>
<div name="taskname" field="name" width="160" >任务名称</div>
<div field="percentComplete" width="80">进度</div>
<div field="duration" width="60" align="right">工期</div>
<div field="start" width="80" dateFormat="yyyy-MM-dd">开始日期</div>
<div field="finish" width="80" dateFormat="yyyy-MM-dd">完成日期
</div>
</div>
URL返回数据
{trees":[
{"duration":"8","start":"2007-01-01T00:00:00","uid":"1",
"finish":"2007-01-10T00:00:00","percentComplete":"0",
"parentTaskUID":"-1","name":"项目范围规划"
},
{"duration":"1","start":"2007-01-01T00:00:00","uid":"2",
"finish":"2007-01-10T00:00:00","percentComplete":"30",
"parentTaskUID":"1","name":"确定项目范围"
},
{"duration":"2","start":"2007-01-01T00:00:00","uid":"3",
"finish":"2007-01-10T00:00:00","percentComplete":"60",
"parentTaskUID":"1","name":"获得项目所需资金"
},
{"duration":"20","start":"2007-01-01T00:00:00","uid":"7",
"finish":"2007-01-10T00:00:00","percentComplete":"40",
"parentTaskUID":"-1","name":"分析/软件需求"
},
{"duration":"6","start":"2007-01-01T00:00:00","uid":"8",
"finish":"2007-01-10T00:00:00","percentComplete":"50",
"parentTaskUID":"7","name":"行为需求分析"
}
]
}
数据结构:
属性:
名称 | 类型 | 描述 | 默认 |
treeColumn | String | 节点列,该列会加一个节点图标 | 无 |
columns | Array | 列集合对象 | 无 |
allowMoveColumn | Boolean | 允许移动列 | true |
allowResizeColun | Boolean | 允许拖拽调节列宽度 | true |
allowResize | Boolean | 允许拖拽调节表格尺寸 | false |