1、分页控件

分页控件常结合grid表格一起使用

属性：

名称	类型	描述	默认
pageIndex	Number	页码	0
pageSize	Number	每页多少条	10
totalCount	Number	总记录数	0

方法：

在使用方法的时候,需要先用$J 获取到对象,如$J.get(id),再使用方法.

名称	参数	描述	返回值
update ( index, size, total )	index：当前页数；size：每页数据条数；total：总数据数	更新分页控件状态	无
getTotalPage ( )	无	获取总页数	Number

事件：

名称	参数	描述
pagechanged	无	分页信息改变时发生

<div class="nui-pager" style="width: 500px; background: #ccc;" totalCount="123" onpagechanged="onPageChanged"></div>
<script type="text/javascript">function onPageChanged(e) {alert(e.pageIndex + ":" + e.pageSize);}
</script>

2、outlookbar折叠面板组

activeIndex表示当前活动的面板,从0开始

属性：

名称	类型	描述	默认
activeIndex	Number	选中面板的索引	-1
autoCollapse	Boolean	是否自动折叠	false
expandOnLoad	Boolean	各个子面板初始折叠状态	true

方法：

名称	参数	描述	返回值
setGroups ( Array )	array：groups数组	设置groups数组	无
addGroup ( Object [, index] )	Object：group对象； index：Number；索引号	增加group	无
removeGroup ( name/index )	name：group名称；index：group索引号	删除group面板	无
removeAll ( )	无	删除所有子Group	无
moveGroup ( group, index )	group：group对象；index：索引号	移动group面板到新位置	无
updateGroup ( group, options )	group：group对象	更新group面板	无
getGroup ( index ) getGroup ( groupName )	index：group索引号； groupName：group名称	获取group面板对象	无
getGroupBodyEl ( index ) getGroupBodyEl ( groupName )	index：group索引号； groupName：group名称	获取group面板对象内容区DOM元素	无

事件：

名称	参数	描述
activechanged	无	面板切换时发生

<div class="nui-outlookbar " activeIndex="0" style="width:180px;height:200px;" autoCollapse="true">
<div title="Small Items">1
</div><div title="Large Items">2</div>
</div>

3、OutlookMenu菜单导航

属性：

名称	类型	描述	默认
url	String	数据地址	无
dataField	String	url返回JSON对象中菜单列表数据的字段名称	无
idField	String	值字段	id
textField	String	节点文本字段	text
iconField	String	图标字段	iconCls
parentField	String	父节点字段	pid
resultAsTree	Boolean	url数据是否列表	true

方法：

名称	参数	描述	返回值
load ( Array )	array：数据数组	加载树形数据	无
getSelected ( )	无	获取选中项	无
selectNode ( node )	node：节点索引号,从0开始	选中节点	无
loadList ( Array, idField, parentField )	array：数据数组；idField：值字段；parentField：父节点字段	加载列表数据.比如：tree.loadList(list, “id”, “pid”)	无

事件：

名称	参数	描述
itemclick	{ sender: Object, item: Object }	项点击时发生
itemselect	{ sender: Object, item: Object }	项选中时发生

<div class="nui-outlookmenu"
url="<%=request.getContextPath()%>/studentCtrler/testNavig.do" onitemselect="onItemSelect"dataField="outlookmenus" idField="id" parentField="pid" textField="text">
</div>

URL返回数据 

{outlookmenus:
[{ id: "user", text: "用户管理"},{ id: "addUser", pid: "user", text: "增加用户", iconCls: "icon-add", url: "../navbartree/navbartree.html" },{ id: "editUser", pid: "user", text: "修改用户", iconCls: "icon-edit", url: "../buttonedit/openwindow.html" },{ id: "removeUser", pid: "user", text: "删除用户", iconCls: "icon-remove", url: "../datagrid/datagrid.html" },{ id: "right", text: "权限管理"},{ id: "addRight", pid: "right", text: "查询权限", iconCls: "Note", url: "../navbartree/navbartree.html", iconPosition: "top" },{ id: "editRight", pid: "right", text: "操作权限", iconCls: "Reports", url: "../buttonedit/openwindow.html", iconPosition: "top" }
]
}

4、outlooktree树形效果

属性：

名称	类型	描述	默认
url	String	数据地址	无
idField	String	值字段	id
textField	String	节点文本字段	text
iconField	String	图标字段	iconCls
parentField	String	父节点字段	pid
expandOnLoad	Boolean/Number	加载后是否展开.比如：true展开所有节点；0展开第一级节点.以此类推	false

div id="leftTree" class="nui-outlooktree" url="<%=request.getContextPath()%>/studentCtrler/testNavig.do" onnodeselect="onNodeSelect" dataField="outlookmenus" textField="text" idField="id" parentField="pid" style="width:300px; height:400px;">
</div>

URL返回数据

{outlooktrees:
[{id: "user", text: "用户管理"},{id: "lists", text: "Lists", pid: "user" },{id: "datagrid", text: "DataGrid", pid: "lists"},{id: "tree", text: "Tree" , pid: "lists"},{id: "treegrid", text: "TreeGrid " , pid: "lists"},{id: "layouts", text: "Layouts", expanded: false, pid: "user"},{id: "panel", text: "Panel", pid: "layouts"},{id: "splitter", text: "Splitter", pid: "layouts"},{id: "layout", text: "Layout ", pid: "layouts"},{id: "right", text: "权限管理"},{id: "base", text: "Base", expanded: false, pid: "right" },{id: "ajax", text: "Ajax", pid: "base"},{id: "json", text: "JSON", pid: "base"},{id: "date", text: "Date", pid: "base"},{id: "forms", text: "Forms", expanded: false, pid: "right"},{id: "button", text: "Button", pid: "forms"},{id: "listbox", text: "ListBox", pid: "forms"},{id: "checkboxlist", text: "CheckBoxList", pid: "forms"},{id: "radiolist", text: "RadioList", pid: "forms"},{id: "calendar", text: "Calendar", pid: "forms"}
]
}

5、tabs选项卡

activeIndex为当前活动的面板,从0开始

属性：

名称	类型	描述	默认
activeIndex	Number	选中面板的索引	-1
tabAlign	left/center/right/fit	对齐方式	left
tabPosition	left/top/right/bottom	定位方式	top
showBody	Boolean	是否显示内容区	true
bodyStyle	String	内容区样式	无
url	String	路径地址	无
refreshOnClick	Boolean	点击tab时不断刷新页面	false
maskOnLoad	Boolean	加载时遮罩	true
titleField	String	标题文本字段	title
urlField	String		url
plain	Boolean	是否隐藏头部背景	true
CloseWhenDblClick	Boolean	双击关闭tab	true

方法：

名称	参数	描述	返回值
setTabs ( Array )	array：tab对象数组	设置tabs数组.tab对象	无
addTab ( Object [, index] )	Object：tab对象；index：Number,索引号	增加tab	无
removeTab ( name/index )	name：tab名称；index：tab索引	删除tab面板	无
removeAll ( butTab )	butTab：例外的tab	删除所有子tab	无
moveTab ( tab, index )	tab,：需移动的tab索引号；index：移动后的新位置	移动tab面板到新位置	无
updateTab ( tab, options )	tab,：需更新的tab索引号；options：更新后的新tab面板对象	更新tab面板	无
activeTab ( tab )	tab：需选定的tab索引号	选中tab面板	无
getTab ( index/name )	index/name：需获取的tab索引号	获取面板对象	tab
reloadTab ( tab )	tab：需重新加载的tab索引号	重新加载tab	无
getTabBodyEl ( tab )	tab： tab索引号	获取Tab的内容区元素	Element
getTabIFrameEl ( tab )	tab： tab索引号	获取Tab的IFrame元素	Element

事件：

名称	参数	描述
beforeactivechanged	{ sender: Object tab: Object, cancel: false }	面板切换前发生
activechanged	{ sender: Object tab: Object }	面板切换时发生
beforecloseclick	{ sender: Object tab: Object, cancel: false }	关闭tab前发生
closeclick	{ sender: Object tab: Object }	tab关闭时发生
tabload	{ sender: Object tab: Object }	tab内容页面加载完成时激发
tabdestroy	{ sender: Object tab: Object }	tab内容页面销毁时激发

6、menu菜单

属性：

名称	类型	描述	默认
allowSelectItem	Boolean	是否允许选择菜单项	false
url	String	菜单数据地址	无
textField	String	节点文本字段	text
idField	String	值字段	id
parentField	String	父节点字段	pid

方法：

在使用方法的时候,需要先用$J 获取到对象,如$J.get(id),再使用方法.

名称	参数	描述	返回值
setItems ( items )	items：菜单项对象MenuItem	设置菜单项数组.菜单项对象MenuItem	无
showAtPos ( x, y )	x：显示位置的x坐标,y：显示位置的y坐标	显示菜单位置	无
getSelectedItem ( )	无	获得选中的菜单项对象	无
load ( url )	url：数据url	加载菜单数据	无
loadList(Array,idField, parentField )	array：数据数组；idField：值字段；parentField：父节点字段	加载列表数据.比如：tree.loadList(list, “id”, “pid”)	无

事件：

名称	参数	描述
itemclick	{ sender: Object, //树对象 item: Object,   //项对象 isLeaf: Boolean }	菜单项点击时发生
itemselect	{ sender: Object, //树对象 item: Object,   //项对象 isLeaf: Boolean }	菜单项选中时发生

<div style="width: 10%"><ul id="menu2" class="nui-menu"><li><span>操作</span><ul><li iconCls="icon-new" onclick="onItemClick">新建</li><li class="separator"></li><li iconCls="icon-add" onclick="onItemClick">增加</li><li iconCls="icon-edit" onclick="onItemClick">修改</li><li iconCls="icon-remove" onclick="onItemClick">删除</li></ul></li><li class="separator"></li><li iconCls="icon-open" onclick="onItemClick">打开</li><li iconCls="icon-remove" onclick="onItemClick">关闭</li></ul>
</div>

7、menuitem菜单项

属性：

名称	类型	描述	默认
text	String	菜单项文本	无
iconCls	String	菜单项图标类	无
iconStyle	String	菜单项图标	无
iconPosition	left/top	图标位置	无
menu	Menu	下一级菜单	无
checked	Boolean	是否选中	无
checkOnClick	Boolean	点击时是否自动选中	无
groupName	String	菜单项组名称.设置后,会单选菜单项组	无

事件：

名称	参数	描述
click	无	菜单项点击时发生

8、toolbar工具栏

<div class="nui-toolbar" style="width: 700px;"><a class="nui-button" iconCls="icon-add">增加</a><a class="nui-button" iconCls="icon-edit">修改</a><a class="nui-button" iconCls="icon-remove">删除</a><span class="separator"></span><a class="nui-button" plain="true">增加</a><a class="nui-button" plain="true">修改</a><a class="nui-button" plain="true">删除</a><span class="separator"></span><input class="nui-textbox" /><a class="nui-button" plain="true">查询</a>
</div>

9、数据验证

名称	类型	描述	默认
required	boolean	当required=“true”,表示不能为空,所选、所填的不能为空,反之则可以为空,或不填写	无
vtype	string	vtype表示验证规则,当vtype=’email’,表示必须是邮箱地址,vtype=’url’,表示必须是URL网址,等	无
minLengthErrorText	string	文本框最小长度的错误提示,当minLengthErrorText="密码不能少于5个字符",当你输入的代码少于5个字符,则会出现此提示的错误信息	无

普元nui:Navigations相关推荐

1. java前端nui_spring mvc 及普元nui前端框架学习笔记

   spring mvc 及普元nui前端框架学习笔记 页面传值 一.同一页面 直接通过$J.getbyName("id").setValue(id); Set值即可 二.跳转页面(b ...

2. 普元nui:Forms

   DataBinding数据绑定 jsp //数据表格 <div id="datagrid" class="nui-datagrid" style=&quo ...

3. 普元nui：demo

   注意 : js与jquery无法取得nui组件value nui-htmlfile控件的url必须通过action提交 datepicker组件不能通过setValue设值 通过$J调用的全局函数,当 ...

4. 普元nui:Lists列表

   1.DataGrid  $J.getDataGrid来获取grid对象 a.后台数据:key="total",value="数据数量":key="da ...

5. 普元nui:页面布局

   1.整体布局 其中最外层div中的class将设置为nui-layout样式,内部 div通过设置region位置来设置方位 属性 类型 描述 默认 class String 设置样式 nui-lay ...

6. 普元nui:按钮特效

    jsp <!-- 引入导航栏css特效 --> <link rel="stylesheet" href="<%=request.getConte ...

7. 普元微服务平台EOS Platform 8全新发布

   2019独角兽企业重金招聘Python工程师标准>>> 转载本文需注明出处:EAWorld,违者必究. 平台简介: ​ 普元新一代应用平台EOS Platform 8已经全面拥抱微服 ...

8. 普元王葱权：数字化时代需要新一代的大数据应用平台架构

   记者 | 杨丽 出品 | AI 科技大本营(rgznai100) 2018 年 12 月 6 日,北京新云南皇冠假日酒店,由中国计算机学会主办,CCF 大数据专家委员会承办,CSDN.中科天玑数据科技 ...

9. AI工程的实践者：普元积极将场景落地，为企业提供智能化解决方案

   作者 | Jane 出品 | AI科技大本营 11 月 8-9 日,CSDN 和 AICamp 联合举办的 AI 开发者大会在北京顺利举行.普元移动产品线总经理郝振明发表了<基于机器学习的工程实 ...

最新文章

1. mysql替换开头_如何在MySQL的字符串开头搜索和替换特定字符？
2. 悬赏２００积分征集cisco7505多线路负载均衡方案
3. 如何将Pytorch生成的模型进行CPU部署
4. MySQL 索引方式
5. 浙江人22条经典经商法则(转载)
6. 网页搜索怎么显示排名_深圳seo搜索排名优化效果怎么样
7. python数据批量写入iq数据库_通过Load table命令将数据文件加载到Sybase IQ数据库里面的Python脚本...
8. KODExplorer可道云-资源管理器（芒果云）
9. 支付宝、微信收款码明年3月1日起将禁止商用？系误读！
10. 初识Visual Studio 2010（四）—— 创建ASP.NET网站
11. 07向量的点积、数量积、两向量垂直的条件、投影与投影向量、向量的正交分解、几个不等式、用坐标计算数量积
12. Mybatis动态数据源
13. HDU 4278 卡特兰，区间DP
14. 请问，非计算机专业，只为软考中级，哪一种最容易过？
15. python 多元字符多项式的展开问题
16. 张一鸣：年轻人一定要懂得延迟满足
17. vue 前端传图片文件，后端接收
18. cad计算机绘注意事项,CAD打印的基本操作和重要的注意事项
19. Day 03-常用 Composition API_拉开序幕的setup()
20. hadoop之mapreduce教程+案例学习（二）

热门文章

1. 一个丝滑的视频背景网页样式
2. vue如何解决axios请求前端跨域问题
3. java do对象_java一些对象概念扫盲帖（DO VO DTO PO）
4. 「传统的互联网模式」与「互联网」，其实是有着本质的区别的
5. 这所985高校6年招聘8000多青年人才引热议！高校割起年轻博士的韭菜有多疯狂？...
6. 无法将applewatch与您的iphone配对
7. pycharm文件中英文变奇怪的文字
8. php都是乱码,PHP出现乱码该如何解决 看完你就知道了
9. 素材资源下载网站源码及虚拟商品交易文章发布官网 织梦模板
10. c5.0决策树算法_决策树算法