Vue结合jqGrid数据绑定的通用弹出选择框

<div style="padding: 10px 0 20px 10px;">
        <label><h2>公共组件input弹出选择控件-用于建立快速的表之间的关联绑定</h2></label>
        <p>author:沈兴平创建时间:2019-08-19</p>
        <h3>说明:</h3>
        1、提高开发工作效率，目前主流脚手架基本上提供代码生成，单表增删改查很方便，但是针对某个数据需要绑定另外一个表的数据没有，这里希望能尽量做到通用组件化，通过一个配置，点击一个input弹出查询列表选择数据再回写，一步到位。<br/>
        2、如果结合vue的v-model数据绑定，需要优先初始化vm对象如：vm = new Vue({...});因为$watch监听需要vue支持<br/>
        3、之后再调用bindInputFormOpen();<br/>
        4、全局匹配input，检测inputfromopen属性<br/>
        5、参数说明：<br/>
        <table class="ui-jqgrid-htable ui-common-table table table-bordered">
            <thead><tr><td>参数名</td><td>必填</td><td>描述</td></tr></thead>
            <tbody>
                <tr><td>inputfromopen</td><td>是</td><td>申明此控件需要绑定弹出选择框</td></tr>
                <tr><td>vModelFullPath</td><td>否</td><td>仅在配合使用v-model时使用，需配置通过vue对象直接访问的全路径</td></tr>
                <tr><td>valueField</td><td>是</td><td>在弹出框选择数据时，指定弹出框里面要取值的字段名用于建立绑定关系，必须是唯一性类似id的作用</td></tr>
                <tr><td>displayField</td><td>否</td><td>默认同valueField，区别不建立绑定关系，仅显示，因为如果valueField是id的话不方便显示</td></tr>
                <tr><td>queryPageUrl</td><td>否</td><td>仅在配合使用v-model时使用，用于第一次打开查询后台回显displayField</td></tr>
                <tr><td>selectCallbackFn</td><td>否</td><td>默认调getSelectedRowData函数在common.js，用于从弹出页面选中jqGrid表格数据</td></tr>
                <tr><td>layerOption</td><td>是</td><td>layer弹出框相关配置，参考原生api，这里直接丢给layer.open</td></tr>
            </tbody>
        </table>
        <h3>js示例：</h3>
        $(function(){<br/>
          var vm = new Vue({...});<br/>
          bindInputFormOpen();<br/>
        });
        <h3>html示例:</h3>
        <input type="text" name="serverIp" v-model="apiServer.serverIp" class="form-control" placeholder="服务器IP"
               inputfromopen
               vModelFullPath="vm.apiServer.serverIp"
               valueField="apiCode"
               displayField="apiCode"
               queryPageUrl="${request.contextPath}/apiManage/apiloglist/list"
               selectCallbackFn="getSelectedRowData"
               layerOption="{content:'${request.contextPath}/modules/apiManage/apiloglist.html'}"/>
    </div>

来源：https://www.cnblogs.com/shenxingping/p/11386880.html

标签

vue

jqgrid