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

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

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

说明:

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，用于从弹出页面选中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'}"/>

selectCallbackFn=“getSelectedRowData”，getSelectedRowData未回调参考实现方式:

function getSelectedRowData() {
	var rowid = getSelectedRow();
	var jqGrid = $("#jqGrid");
	var rowData = jqGrid.jqGrid("getRowData",rowid);
	return rowData;
}
//选择一条记录
function getSelectedRow() {
    var grid = $("#jqGrid");
    var rowKey = grid.getGridParam("selrow");
    if(!rowKey){
        alert("请选择一条记录");
        return ;
    }
    
    var selectedIDs = grid.getGridParam("selarrrow");
    if(selectedIDs.length > 1){
        alert("只能选择一条记录");
        return ;
    }
    
    return selectedIDs[0];
}

 

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

确定回写指定的value值。

 核心js下载

 

PS:码云springboot2.0通用权限系统脚手架同步更新 https://gitee.com/shenxingping/XPBoot

posted on 2019-08-21 09:26  大麦牛奶 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/shenxingping/p/11386880.html