1.頁面所有資料都已打通，行內編輯界面效果如下所示：
select2可以選也可以搜索，但是問題是select2的資料是在第一次加載頁面時直接把全部資料給load過來，把資料源放在本地上實作的。
我想實作的是搜索是從服務端去load資料
代碼如下，望各位大神指點一二：
var TableInit = function () {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function () {
$("#checkMedical").bootstrapTable({
url:"${ctx}medicalhistory/backtrackmhistoryinfo",
type:"get",
pagination: true,//分頁
striped: true,//是否顯示行間隔色
cache: true, //是否使用快取默認為true
sortable: false, //是否啟用排序
sortOrder: 'asc', //排序方式
undefinedText: '',
clickToSelect:true, //單擊行選中對應復選框
ajaxOptions:{async:false},
sidePagination: 'server', //分頁方式：client客戶端分頁，server服務的分頁
pageNumber: 1, //初始化加載第一頁，默認第一頁
pageSize: 5, //每頁的記錄行數
pageList: [10, 15, 20],//可供選擇的每頁的行數
search: false, //是否顯示表格搜索，此搜索是客戶端搜索，不會進服務端
paginationPreText: "上一頁",
paginationNextText: "下一頁",
fixedColumns: false,//固定列
fixedNumber: 4,//固定前兩列
queryParams: oTableInit.queryParams,//傳遞引數（*）
responseHandler:function (res) {
console.log(res)
return res;
},
columns: [
[{
checkbox:true,
align:"center",
valign:"middle"
},{
field: 'Name',
title: '行號',
rowspan:'2',
formatter: function (value, row, index) {
return index+1;
}
},{
field: "BSID00",
title: "ID",
},{
field: "BSMC00",
title: "病史名稱",
editable: {
type: 'text',
title: '病史名稱',
validate: function (v) {
if (!v) return '病史名稱不能為空';
}
}
},{
field: "SFCY00",
title: "常用",
editable: {
type: "select",
separator:",",
source: [{ value: '1', text: '常用' },
{ value: '0', text: '不常用' }],
}
},{
field: "",
title: "病史類別",
},{
field: "ICDBM0",
title: "ICD編碼",
editable: {
type: 'select2',
title: 'ICD編碼',
name : 'ICDBM0',
source : function () {//動態獲取資料
var result = [];
$.ajax({
url : "${ctx}medicalhistory/Type_select2",
async : false,
type : "get",
data : {"sign":"3"},
success : function(data) {
$.each(data.data,function(i,item){
var obj = {};
obj.id =item.ICDBM0;
obj.text = item.ICDBM0;
result.push(obj);
});
}
});
return result;
},
emptytext : "暫無",
select2 : {
//tags:true,
allowClear : true,
language: "zh-CN",
placeholder: '請選擇ICD碼',
width : '150px',//設定寬
id: function (item) {
return item.text;
}
}
}
},{
field: "XB0000",
title: "性別",
editable: {
type: "select",
separator:",",
source: [{ value: '2', text: '女性' },{ value: '1', text: '男性' },
{ value: '0', text: '不限' }],
}
},{
field: "",
title: "序號",
},{
field: "YXBZ00",
title: "有效標志",
editable: {
type: "select",
separator:",",
source: [{ value: '1', text: '有效' },
{ value: '0', text: '無效' }],
}
},{
field: "BZBH00",
title: "在線標準編碼",
editable: {
type: 'text',
title: '在線標準編碼',
emptytext : "暫無",
}
},{
field: "YSSM00",
title: "飲食說明(套餐)",
editable: {
type: 'text',
title: '飲食說明(套餐)',
emptytext : "暫無",
}
},{
field: "JLMC00",
title: "結論",
editable: {
type: 'select2',
title: '結論',
emptytext : "暫無",
name : 'JLMC00',
source : function () {//動態獲取資料
var result = [];
$.ajax({
url : "${ctx}medicalhistory/Type_select2",
async : false,
type : "get",
data : {"sign":"4"},
success : function(data) {
$.each(data.data,function(i,item){
var obj = {};
obj.id =item.JLMC00;
obj.text = item.JLMC00;
result.push(obj);
});
}
});
return result;
},
emptytext : "暫無",
select2 : {
//tags:true,
allowClear : true,
language: "zh-CN",
placeholder: '請選擇結論',
width : '150px',//設定寬
id: function (item) {
return item.text;
}
}
}
},{
field: 'operator',
title: '操作',
formatter: setformete
}],[
{
field: "BSLBMC",
title: "成人",
editable: {
type : 'select2',
title: '成人',
name : 'BSLBID',
source : function () {//動態獲取資料
var result = [];
$.ajax({
url : "${ctx}medicalhistory/Type_select2",
async : false,
type : "get",
data : {"sign":"1"},
success : function(data) {
$.each(data.data,function(i,item){
var obj = {};
obj.id =item.LBMC00;
obj.text = item.LBMC00;
result.push(obj);
});
}
});
return result;
},
emptytext : "暫無",
select2 : {
//tags:true,
allowClear : true,
language: "zh-CN",
placeholder: '請選擇病史類別',
width : '150px',//設定寬
id: function (item) {
return item.text;
uj5u.com熱心網友回復：
請問解決了嗎uj5u.com熱心網友回復：
實作方法是另寫一個select去替換控制元件的select的但是樣式很丑感覺不好uj5u.com熱心網友回復：
我這邊用一個彈出框去代替了，這個插件真的坑多
uj5u.com熱心網友回復：
請問你的樣式正確嗎？我這邊在文本框一輸入查詢條件，樣式就變了轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/23596.html
標籤：JavaScript
上一篇：求網課培訓視頻快速刷進度方法？
下一篇：解決自定義div拖拽卡頓問題