AdminEAP框架数据列表render的五种方式_adminlte如何渲染页面数据-优快云博客

本文链接：https://blog.youkuaiyun.com/jrn1012/article/details/61919518

##介绍
在AdminEAP框架中，数据列表使用Bootstrap-DataTables组件（基于Jquery-DataTables）,在AdminEAP框架中进行二次封装，其中有些数据列需要在原来的数据基础上进行二次渲染，分别支持以下几种方式：
- render （type=eq）固定值的’翻译’
- render (type=window) 弹出窗体
- render (type=link) 超链接
- tooltip 鼠标悬停提示
- fnRender 渲染回调函数

xml配置示例

以下是以上几个属性在xml配置中的示例和部分说明。

 <query id="message_draft" key="id" tableName="我的草稿箱" className="com.cnpc.tool.message.entity.Message" widthType="px">
        <column key="rowIndex" header="序号" width="80"/>
        <column key="id" header="id" hidden="true"/>
        <column key="sendUser" header="发送人" hidden="true" classType="String" allowSort="false" width="150"/>
        <!--enableTootip(是否显示) maxLen(最大长度默认10，可在dataTables.js修改默认值) tooltip（指定tooltip来源，可不配，缺省为本身） 长文本鼠标悬停显示-->
        <!--弹窗方式render="type=window"使用;所需参数同modals.openWin的参数-->
        <!--<column key="sendSubject" header="主题" classType="String" align="left" render="type=window,winId=messageEditWin,url=/message/edit?id=[id],title=弹窗测试[sendSubject]" enableTooltip="true" maxLen="20" allowSort="true" width="150"/>-->
        <!--超链接方式 render="type=link",method方法名称，params方法参数,分号;分隔，如不需要参数params为可为空，默认注入rowId-->
        <!--<column key="sendSubject" header="主题" classType="String" align="left" render="type=link,method=loadPage,params='/message/edit?id=[id]';'#contentBody'" enableTooltip="true" maxLen="20" allowSort="true" width="150"/>-->
        <column key="sendSubject" header="主题" classType="String" align="left" render="type=link,method=showDetail" enableTooltip="true" maxLen="20" allowSort="true" width="150"/>    
        <column key="sendTime" header="发送时间" classType="Date" allowSort="true" dateFormat="yyyy-mm-dd hh:ii"  operator="between" width="150"/>
        <column key="messageType" header="类型" classType="String" align="left" width="50" fnRender="fnRenderMessageType"/>
        <!--isServerCondition=true value=0注入服务器端查询条件，也可在前端以type=hidden隐藏域的方式注入-->
        <column key="messageStatus" header="状态" isServerCondition="true" value="0" classType="String" allowSort="false" width="50" fnRender="fnRenderMessageStatus"/>
        <column key="messageFlag" header="标记" classType="String" allowSort="true" width="150" fnRender="fnRenderMessageFlag"/>
        <column key="fileIds" header="附件" classType="String" width="150" fnRender="fnRenderFileIds"/>     
          <!--<column key="deleted" header="是否删除" classType="String" allowSort="true" width="150" render="0=可用,1=禁用"/>-->
    </query>

使用说明

render(type=eq)

示例：
(1) render=”type=eq,0=可用，1=禁用” (其中type=eq可缺省)
(2) render=”1=禁用,else=可用”
配置以后，组件会把相应值翻译为对应值。

type=eq eq类型的render,可缺省

render(type=window)

配置后，点击该列值，会弹出一个模态窗体，将配置的所有参数传递给modals.openWin方法。
示例：
(1) render=”type=window,winId=messageEditWin,url=/message/edit?id=[id],title=弹窗测试[sendSubject]

其中[id]，[sendSubject]会被替换为当前行对象的该列的值，是指定列（column key=’id’和column key=’sendSubject’）的值

type=window:窗体render,必配
winId:窗体id,必配
url:url路径,必配

其他参数通modals.openWin参数，如width等等

render(type=link)

配置某列的超链接。配置形式是调用onclick方法，建议比较复杂的超链接采用这种配置。
示例：
(1) render=”type=link,method=loadPage,params=’/message/edit?id=[id]’;’#contentBody’”
(2) render=”type=link,method=showDetail”

其中[id]会被替换为当前行对象的该列的值，是指定列（column key=’id’）的值

type=link:超链接render,必配
method:超链接执行方法名称，必配
params：方法执行参数，分号(;)分隔,若缺省，会自动将当前行id注入方法，及query key执行的值

需要注意的是，前台需要相对应的js方法，比如，以上两个实例需要前端由loadPage(url)和shoWDetail(rowId)方法。

fnRender

更复杂的前端展示和业务逻辑，需要在前端编写相应的业务逻辑
示例：
（1）：fnRender=”fnRenderMessageStatus”

对应前端脚本

function fnRenderMessageStatus(value, type, rowObj，oSetting) {
    if (value == 0) {
        return '<span class="label label-warning">草稿</span>'
    } else if (value == 4) {
        return '<span class="label label-success">已发送</span>';
    }
    return value;
}