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

公共组件input弹出选择控件-用于建立快速的表之间的关联绑定

author:沈兴平 创建时间:2019-08-19

说明:

1、提高开发工作效率，目前主流脚手架基本上提供代码生成，单表增删改查很方便，但是针对某个数据需要绑定另外一个表的数据没有，这里希望能尽量做到通用组件化，通过一个配置，点击一个input弹出查询列表选择数据再回写，一步到位。
2、如果结合vue的v-model数据绑定，需要优先初始化vm对象如：vm = new Vue({...});因为$watch监听需要vue支持
3、之后再调用bindInputFormOpen();
4、全局匹配input，检测inputfromopen属性
5、参数说明：

参数名	必填	描述
inputfromopen	是	申明此控件需要绑定弹出选择框
vModelFullPath	否	仅在配合使用v-model时使用，需配置通过vue对象直接访问的全路径
valueField	是	在弹出框选择数据时，指定弹出框里面要取值的字段名用于建立绑定关系，必须是唯一性类似id的作用
displayField	否	默认同valueField，区别不建立绑定关系，仅显示，因为如果valueField是id的话不方便显示
queryPageUrl	否	仅在配合使用v-model时使用，用于第一次打开查询后台回显displayField
selectCallbackFn	否	默认调getSelectedRowData函数在common.js，用于从弹出页面选中jqGrid表格数据
layerOption	是	layer弹出框相关配置，参考原生api，这里直接丢给layer.open

js示例：

$(function(){
  var vm = new Vue({...});
  bindInputFormOpen();
});

html示例:

<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'}"/>

效果图点击输入框，弹出选择框

确定回写指定的value值。