QQZiFramework笔记：entityTable与erp.public.js使用方法之常归篇

来源：互联网发布：电脑怎么连网络机顶盒编辑：程序博客网时间：2024/06/06 09:10

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修改了结果需要显示在行上（默认的编辑会自动刷新）

0 0