敏捷开发框架：查询页面模型
查询页面的开发：
下面以用户管理为例子
打开效果如下：
总体结构就是上面查询条件
接着是 查询按钮
接着是 功能按钮
最后是 数据列表展示
这种style的页面在任何一个项目中都是绝大多数的，通过总结抽象，定义为 QueryPage 查询页面
如何实现一个查询页面：
查询条件：研发人员根据业务场景，按照要求摆放
查询结果：研发人员根据业务场景，添加具体的列
查询条件：
结构都如下
查询结果：
也就是Table表格
这样子：就差不多了。
下面看如何实现这个查询页面的功能
要求如下
一、点击按钮要能够查询数据并展示
二、点击清空按钮要能够清楚查询条件值
三、这个页面打开可能要求默认查询数据
四、这个页面查询的时候可能需要按照某字段默认排序
五、要支持分页事件的实现
六、分页还要支持分页大小可调整
七、要支持排序事件的实现
八、要支持选择框，实现按选择操作、实现全选等
九、要实现列表列用户可以自己选择显示几列
十、要实现默认导出功能
……
十一、需要方便的实现删除功能
十二、需要方便的实现弹出新增画面、编辑画面
未完……待续……不断的冒出新的要求……
上面的等等功能在QueryPage中实现。
通过追求极致的设计理念+高度的抽象封装
如何实现上述功能：
首先你只需要上述一行代码
就实现了查询画面的基本功能。
实现了：
一、对查询按钮注册了click事件，当你点击查询的时候，就实现加载数据。
怎么加载的？调用什么API？查询条件是怎么传的？
searchApi告诉了，是调用 user 的 search API方法
至于查询条件嘛，不需要你写，框架自动实现
二. 对查询清空按钮注册了click事件，实现清除查询条件功能
另外通过 EciTable类初始化了 表格
自动实现：
五、要支持分页事件的实现
六、分页还要支持分页大小可调整
七、要支持排序事件的实现
八、要支持选择框，实现按选择操作、实现全选等
九、要实现列表列用户可以自己选择显示几列
十、要实现默认导出功能
导出都实现了，对的，有个前提，你的按钮是叫 btnExport
那好，我们来继续模拟需求的变化：
产品经理要求，打开这个页面，立刻查询数据
开发人员只需要在增加红色框线中的代码即可。
产品经理要求，打开这个页面，查询数据的时候，默认按照USERNAME 升序排列
如上，搞定
接下来，要开发UserEdit画面
查询列表里面，有个编辑按钮，我要实现点击编辑按钮的时候弹出一个画面实现编辑
增加红色框线的代码
要告诉page editUrl也就是要打开的页面地址：
按钮【编辑】只需要写 page.edit(this) 即可
效果如下：
是不是非常简单，已经简单不到不能再简单了
连编辑的是哪一条记录都不需要你关心了。
虽然不需要你写代码，关心还是要关心的。我们看看打开的这个页面地址
哦，的确打开的是UserEdit画面，同时还传了USERID=xxxx
为什么是USERID 而不是USERNAME
看看page初始化的代码
这里有个非常核心的 keyField,任何表都有主键的。需要研发人员告诉QueryPage对象。
好，弹出编辑页面实现了，的确非常容易。
如果没有配置，就默认是按钮的名字
这个是用来控制弹出窗体的标题
接下来实现功能
在页面上有【添加新用户】按钮，其实也就新增功能，只是叫的名字不一样而已，那这个要怎么实现
其实你已经实现了，什么已经实现了，只要上面设置了 EditUrl ，因为我们 编辑和新增是共用一个页面。
不行，我总得要写点什么吧，不然无码可码了。
这个愿望好难实现。那怎么就实现了的总归要告诉我吧。
如上图：只要你的按钮名字叫 btnAdd就可以了。
我非不，我就不叫btnAdd,
想自找麻烦，证明存在感，好吧，满足你
例如你按钮id 叫 btnImHere
回到页面初始化的地方，你可以指定 addId
框架中设计的所有默认值都是可以重新指定的，照顾到可能的灵活性。
同时建议大家遵守一致的约定，来获得最大的方便性。
好吧，新增、编辑都这么轻松了实现了。那我们来看看删除吧，这个逻辑相对复杂。
还能这么轻松的应对？
好了，这样加上述红色框线部分的代码就实现了。
既然是删除，总归要告诉 调用后台哪个API，deleteApi 就是这个作用
第二部分加的是按钮，只要调用 page对象的 delete方法
注意 page.delete(this) this 很关键
因为已经不要你关心调用API的时候传递当前行的主键，框架帮你完成了，这个this就点击的按钮，
框架通过按钮自动找到行，自动取主键
好吧，为难为难你，如果要删除的时候弹出的提示不一样，我要自定义
那，我要删除的时候比较慎重，要提示确定要删除吗?还要用户输入验证码
不光输入验证码，我后台API逻辑还不要调整。
为什么这么刁难，其实也不是刁难
前台一会说要验证码，我后台加
一会又说不要验证码，我后台删
你爱要不要，我后台就不写，那怎么办
框架关于验证码，由底层封装实现，对应用透明，应用只关注哪个地方需要增加验证码即可。
那现在我删除这块就要，怎么弄？
只要增加红色框线部分的配置即可。
产品经理说：为方便客户操作，双击行也能打开编辑画面
这个样看到这一行数据的时候，不用拖到最左边点击【编辑】按钮
需求合理，支持
增加 click:true 即可
用户动态其实是双击打开，这里面为了方便开发人员编码体验，命名为 click
打开的画面就是前面介绍的 EditUrl配置的编辑画面
好吧，需要变了，点击【编辑】是打开编辑画面，双击打开的是这个对象的 View查看画面
为什么要设计两个画面呢，因为view画面只给查看不给编辑
如果设置了ViewURL优先取viewUrl
好吧，变态的需求用来了。
我双击还是打开EditUrl 但是要能区分是双击来的（我们双击定义为查看）
这又是为何？不是说好的如果这样写两个画面吗？
不要有意思，我先烦，综合考量，view画面和编辑画面可能也没有什么差别，就是要隐藏两个按钮
我决定共用了。
OK，没有问题，你的需要框架已经满足 ViewUrl="UserEdit?view=true"
即可。其实框架还能帮忙做的更好，不要你写ViewURL 你前面设置了 EditUrl 如果是双击的时候自动会带view=true参数给你
好的，现在从查询页面弹出了编辑画面
产品经理希望，在编辑画面关闭的时候，要能够刷新查询页面
怎么实现？
增加editClosed 回调函数即可
其实上面的逻辑在大部分的情况下是需要完善的，关闭就刷新是不对的。
只有弹出的画面，新增了数据或者修改了数据才应该刷新。对吧。否则就是一次性能浪费
仅仅是性能浪费吗？不止！副作用很多。
那要实现修改后才刷新页面怎么办？
上面的代码，增加 红色框线部分的代码就完成了你的需求。
怎么实现的，框架设计了敏捷开发框架《弹窗交互设计》后续分享
好吧，上面貌似都是基本的增删改查功能。
那我要实现如下图的，对这一行数据用户【启用】、【停用】功能怎么实现
【启用】
只需要一行代码，告诉你要调用后台哪个API即可。
参数都不要告诉？
你的关注点是对的，调用后台API
关注两个点，一、调用哪个API、二、传递哪些参数
调用哪个API业务决定，参数框架抽象统一
简单吧。
那继续，启用后，我要重新查询下列表
继续，产品经理说，这个操作要慎重，在操作前要弹出窗确认下是否要启用
只要加上 msg：内容即可
那实现停用，只要考别这一行，改改即可
变化在于红色的地方
好了，行内的启用、停用实现了
产品经理又来了，用户反馈我们需要批量的功能
代码实现如下图：
和前面行内的代码，只有一个mode（模式）的区别
怎么做到的？
敏捷开发框架抽象封装了Action动作模型，EciAction类 通过抽象总结 极大的简化代码的开发
EciAction后续分享
继续功能开发：
这里设计了对用户设置角色的功能
点击按钮【设置角色】弹出 设置角色画面
同样通过action动作模型 行为方式 采用 dialog弹出指定窗体来实现
url地址通过智能表达式解析实现开发的简化
弹出的页面地址 UserRole 参数自动注入。
{keyValue}就是主键值
智能处理主键吗？NO 如果仅仅是主键，那就不能叫智能
业务需求是这样的，弹出的标题，要有意义，能辅助读懂业务含义
对用户《昆山华东资讯》这个人设计角色，这样不是更好
还能解析 row上的所有字段，这样开发就进一步简化了。
可能在一个功能上简化，感觉不到什么，多了，就更能体现价值了。
例如 我们还有【分配权限】的功能要开发
弹出效果：
代码如下：
至此，介绍了 QueryPage的 6 成 功力，大家先了解下！欢迎和我交流 QQ：93346562