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

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
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值