QQZiFramework笔记:entityTable与erp.public.js使用方法之常归篇
2016-07-25 17:00
507 查看
entityTable控件效果如下:
erp.public.js 是前端的一个表格jquery控制,实现单实体的增删改查操作,后端由DBContext提供支持
前提条件(MVC项目):
1、页面需要引入jquery,bootstrap和erp.public.js
2、控制器需要继承QQZiController
我们定义了一个BaseController让所有的控制器都继承它,这里的QQZIUser是用来存储用户状态的类,该类继承QQZiFramework.Membership.BaseUser
--------------------------------------------------------------entityTable使用方法----------------------------------------------------
转到我们的View(MVC的页面)
添加以下Html
我们在页面上定义了一个添加按钮,一个显示表格,和一个div用来存储分页导航
接下来在JS中添加调用
逐一解释一下entityTable_ops中的各个参数
table 实体对象,非表名,这里是维护User表
primary 主键属性(实体属性,非数据表字段),默认为id
pageSize: 分页大小
triggerQuery 载入后自动查询
pagger: 分页控件显示的地方,不指定则会在table的父窗口中append,默认为#pagger
permission 配置项,Content/permission.json文件中对应的项
editCols:编辑的项,group为一个panel可组显示,display为显示label,colName为实体属性名,fields还有其它参数:
type:类型值有text,textarea,dropdown,checkbox,date,pic,默认为text
如果是dropdown类型还需要配置数据源,数据源有三种方式:
data:直接添加data参数,值为json数组,每项要有value和text
url:通过ajax访问url,将返回值做为数据源,每项要有value和text
table:通过内部方法直接查询table,需要配置参数displayField和valueField,分别对应text和value
requre:必需要输入
larger:显示为整行
showLabel:是否显示label,默认显示
事例中新增的按钮执行了一个操作entityTable.ShowCreateDialog(),会弹出新增的对话框
-----------------------------------------------entityTable其它方法-----------------------------------------------
erp.public.js 是前端的一个表格jquery控制,实现单实体的增删改查操作,后端由DBContext提供支持
前提条件(MVC项目):
1、页面需要引入jquery,bootstrap和erp.public.js
2、控制器需要继承QQZiController
public class BaseController:QQZiController<QQZIUser> { } [LoginCheckFilter(IsCheck = false)] public class HomeController : BaseController { }
我们定义了一个BaseController让所有的控制器都继承它,这里的QQZIUser是用来存储用户状态的类,该类继承QQZiFramework.Membership.BaseUser
--------------------------------------------------------------entityTable使用方法----------------------------------------------------
转到我们的View(MVC的页面)
添加以下Html
<div class="page-header"> <p> <a id="addnew" href="#">添加</a> <p> </div> <div class="table-responsive"> <table class="table table-striped table-hover table-responsive" id="listTable"> <thead> <tr> <th colname="#">#</th> <th colname="Name">姓名</th> <th colname="Account">账号</th> <th colname="WeiXin">微信</th> <th colname="#action">操作</th> </tr> </thead> <tbody></tbody> </table> </div> <div id="pagger"></div>
我们在页面上定义了一个添加按钮,一个显示表格,和一个div用来存储分页导航
接下来在JS中添加调用
<script> var entityTable_ops = { table: "User" , primary: "UserId" , pageSize: 10 , triggerQuery: true , pagger: "#pagger" , permission: "DemoPermission" , editCols: [ { group: "基础属性", fields: [ { display: '姓名', colName: "Name", requre: true }, { display: '账号', colName: "Account", requre: true }, { display: '密码', colName: "Password", requre: true }, { display: '提现密码', colName: "ZiEBaoPassword", requre: true }, { display: '微信', colName: "WeiXin", requre: true }, { display: 'QQ', colName: "QQ", requre: true }, { display: '身份证', colName: "IDCard", requre: true }, { display: '手机', colName: "Mobile", requre: true } ] }] }; var entityTable = $("#listTable").entityTable(entityTable_ops); $("#addnew").click(function () { entityTable.ShowCreateDialog(); }) </script>
逐一解释一下entityTable_ops中的各个参数
table 实体对象,非表名,这里是维护User表
primary 主键属性(实体属性,非数据表字段),默认为id
pageSize: 分页大小
triggerQuery 载入后自动查询
pagger: 分页控件显示的地方,不指定则会在table的父窗口中append,默认为#pagger
permission 配置项,Content/permission.json文件中对应的项
editCols:编辑的项,group为一个panel可组显示,display为显示label,colName为实体属性名,fields还有其它参数:
type:类型值有text,textarea,dropdown,checkbox,date,pic,默认为text
如果是dropdown类型还需要配置数据源,数据源有三种方式:
data:直接添加data参数,值为json数组,每项要有value和text
url:通过ajax访问url,将返回值做为数据源,每项要有value和text
table:通过内部方法直接查询table,需要配置参数displayField和valueField,分别对应text和value
requre:必需要输入
larger:显示为整行
showLabel:是否显示label,默认显示
事例中新增的按钮执行了一个操作entityTable.ShowCreateDialog(),会弹出新增的对话框
-----------------------------------------------entityTable其它方法-----------------------------------------------
entityTable.Load(json) //重新加载列表,json为查询条件{Name="name"} entityTable.GetEditPrimaryValue() //编辑模式下,获取当前行的主键值 entityTable.RefreshItem(primaryVal) //按主键值刷新行数据,并且会调用onRowCreated,一般在手动ajax修改了结果需要显示在行上(默认的编辑会自动刷新)
相关文章推荐
- js词法分析
- 解决谷歌浏览器无法读取本地js文件
- js基础之DOM中元素对象的属性方法
- js注册在标签上的点击事件
- JavaScript事件委托
- DataTable转换成json字符串
- JavaScript文档对象模型
- js闭包
- JSON介绍
- extjs3.3 + fushioncharts + velocity 实现折线图
- 《精通javascript》几个简单的函数
- maven中Rhino classes (js.jar) not found - Javascript disabled的处理
- dojo/json传数据
- jsoup简单的爬取网页数据
- js中常用屏蔽代码(转)
- javaScript的继承
- js之运算符的注意事项
- 【JS】 伪主动触发input:file的click事件
- js金额格式化
- JavaScript实现省市级联效果实例