普元nui:Lists列表
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 |
普元nui:Lists列表相关推荐
- java前端nui_spring mvc 及普元nui前端框架学习笔记
spring mvc 及普元nui前端框架学习笔记 页面传值 一.同一页面 直接通过$J.getbyName("id").setValue(id); Set值即可 二.跳转页面(b ...
- 普元nui:Forms
DataBinding数据绑定 jsp //数据表格 <div id="datagrid" class="nui-datagrid" style=&quo ...
- 普元nui:Navigations
1.分页控件 分页控件常结合grid表格一起使用 属性: 名称 类型 描述 默认 pageIndex Number 页码 0 pageSize Number 每页多少条 10 totalCount N ...
- 普元nui：demo
注意 : js与jquery无法取得nui组件value nui-htmlfile控件的url必须通过action提交 datepicker组件不能通过setValue设值 通过$J调用的全局函数,当 ...
- 普元nui:页面布局
1.整体布局 其中最外层div中的class将设置为nui-layout样式,内部 div通过设置region位置来设置方位 属性 类型 描述 默认 class String 设置样式 nui-lay ...
- 普元nui:按钮特效
jsp <!-- 引入导航栏css特效 --> <link rel="stylesheet" href="<%=request.getConte ...
- EOS/普元：中国IT业的悲哀
公司引入了普元的EOS作为公司的基础架构平台,今后的所有项目将逐步向EOS的迁移,但对EOS的研究又让我不得不说出以下话: 1.EOS确实够简单,但未免简单过了头:从语言层面看EOS 因为EOS将成为 ...
- 普元部署包部署找不到构建_让我们在5分钟内构建和部署AutoML解决方案
普元部署包部署找不到构建 Practical machine learning used to be hard - and still is in some specialized areas. Av ...
- 普元EOS/BPS为什么没有安装成功 ？
原文连接 在实际的Platform/BPS的产品安装使用中,经常会遇到安装不成功的场景,运行版不成功多于开发版,运行版中集群安装不成功又多于单机版.手工部署安装问题也会多于安装介质的安装.下面说明一下 ...
最新文章
- cmd命令启动mysql服务
- 【Linux】一步一步学Linux——ypdomainname命令(173)
- 浏览器检测，移动网络的在线离线及网络状态
- PetShop4.0--转载
- Python使用OpenCV+pillow提取AVI视频中关键帧图像
- python 第一课作用
- 用python编写一个点餐程序_用python写一个 点餐代码--急急急 ！！！ 希望高人帮忙！...
- php excel 添加图片不显示图片,excel表格中使用宏批量插入图片,发给别人打开图片不显示...
- 开机就显示重启界面，Lenovo重装Win 10系统的解决办法之一
- 多硬盘分区管理fdisk
- 亚马逊云科技连续12年蝉联Gartner云基础设施和平台服务魔力象限领导者
- C++ 实现对选手、评委的计分
- Python+正则表达式编写多线程百度贴吧网页爬虫
- 2271Eddy的难题
- flash软件下载安装
- Python递归绘制分形树
- Flume采集日志到Kafka经典案例
- 好书《无毒一身轻—21天改变体质》- 总结
- 微信小程序——多张图片上传（uploadFile） Java后台
- 物联网可编程逻辑控制器(一)