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