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"}
]
}
属性:
名称 |
类型 |
描述 |
默认
扫描二维码关注公众号,回复:
9733430 查看本文章
|
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 |