fastamin框架頂部的普通搜尋(取資料庫資料)操作
阿新 • • 發佈:2019-01-27
*我在實際應用時,狀態是從資料庫中取的資料,並不是寫死的,這裡我主要是用了ajax取獲取後臺資料,拼接到HTML模板上面去*
js程式碼(重點看狀態欄位程式碼中的searchList函式)
/**
* Created by Administrator on 2018/7/16.
*/
define(['jquery', 'bootstrap', 'badmin', 'table', 'form'], function ($, undefined, Backend, Table, Form) {
var Controller = {
//全部客戶列表
lists: function () {
// 初始化表格引數配置
Table.api.init({
extend: {
index_url: 'customer/publiccustomer/lists',
add_url: 'customer/publiccustomer/add',
//edit_url: 'customer/publiccustomer/edit',
//del_url: 'customer/publiccustomer/del',
//multi_url: 'customer/publiccustomer/multi',
table: 'customer',
}
});
var table = $("#table");
// 初始化表格
table.bootstrapTable({
url: $.fn.bootstrapTable.defaults.extend.index_url,
escape : false,
pk: 'customer_id',
sortName: 'customer_id',
search:false,
columns: [
[
{checkbox: true},
{field: 'customer_code', title: __('客戶編碼'), sortable: true,operate:false},
{field: 'name', title: __('客戶名稱')},
{field: 'phone', title: __('客戶聯絡手機號')},
{field: 'address', title: __('客戶聯絡地址'),operate:false},
{field: 'remarks', title: __('備註資訊'),operate:false},
{field: 'status_name', title: __('狀態'),searchList:function(){
$.ajax({
type :'POST',
dataType:'json',
data:{},
url:'/badmin/customer/publiccustomer/StatusAjax',
success:function(e){
var html ='<select class="form-control" name="status_name"><option value>選擇</option> ';
for(var i in e.data){
html+="<option value="+ i +">"+ e.data[i] +"</option>"
}
$("input[name='status_name-operate']").after(html);
}
})
}},
{field: 'create_time', title: __('建立時間'), formatter: Table.api.formatter.datetime, operate: 'RANGE', addclass: 'datetimerange', sortable: true},
{field: 'update_time', title: __('更新時間'), formatter: Table.api.formatter.datetime, operate: 'RANGE', addclass: 'datetimerange', sortable: true},
{field: 'operate', title: __('Operate'), table: table,
events: Table.api.events.operate,
buttons: [
{name: '詳情',
text: '詳情',
title: '詳情',
icon: 'fa fa-list',
classname: 'btn btn-xs btn-success btn-dialog',
url: 'customer/publiccustomer/edit',
area_height:'70%',
area_width:'55%'
},
{name: 'name2',
text: '領取',
title: '領取',
confirm:'確認將此客戶領取到你的客戶列表中嗎?',
icon: 'fa fa-flash',
classname: 'btn btn-xs btn-success btn-ajax',
url: 'customer/publiccustomer/placeMine',
success:function(data, ret){
//區域性重新整理
$('.btn-refresh').trigger("click");
}
}
],
formatter: Table.api.formatter.operate
}
]
]
});
// 初始化表格
table.bootstrapTable();
Table.api.bindevent(table);//當內容渲染完成後
},
edit: function () {
Controller.api.bindevent();
},
add: function () {
Controller.api.bindevent();
},
api: {
bindevent: function () {
Form.api.bindevent($("form[role=form]"));
Form.events.datetimepicker($("form"));
}
},
};
return Controller;
});
//三級聯動
var areaID = 0;
function selectArea(type){
areaID = $("#select-"+type+" option:selected").val();
if(areaID == 0){
if(type == 1){
$("#select-2").html("<option value=''>市</option>");
$("#select-3").html("<option value=''>縣區</option>");
areaID = 0;
}
if(type == 2){
$("#select-3").html("<option value=''>縣區</option>");
areaID = $("#select-1").val();
}
if(type == 3){
areaID = $("#select-2").val();
}
return;
}
if(type ==3){
return ;
}
$.ajax({
type:'POST',
dataType:'json',
data:{'areaID':areaID,'type':type},
url:'/badmin/customer/customer/index/changeArea3',
success:function(data){
if(type == 1) {
data ='<option value="">請選擇</option>'+data;
$("#select-2").html(data);
$("#select-3").html("<option value=''>縣區</option>");
}
if(type == 2){
data ='<option value="">請選擇</option>'+data;
$("#select-3").html(data);
}
}
})
}
//關閉當前彈窗
function closeCurrent() {
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
}
$("#cancelButton").click(function(){
closeCurrent();
});
/**
* 檢測手機是否存在
*/
$("#phone").blur(function(){
var phone =$("#phone").val();
$.ajax({
type:'post',
'url':'/badmin/customer/publiccustomer/dealPhone',
data:{phone:phone},
dataType:'json',
success:function(rs){
if(rs.code == 200) {
$("#phone").val('');
layer.alert('系統已經存在該手機號碼!', {
skin: 'layui-layer-molv' ,
closeBtn: 0
});
}
}
})
});
php負責獲取後臺資料
/**
* 前端狀態的選擇
*/
public function StatusAjax(){
$statusModel = new CustomerStatus();
$m_id = $this->auth->m_id;
$data = $statusModel->getStatus($m_id);
if($data){
exit(json_encode(array('code'=>200,'data'=>$data)));
}else{
exit(json_encode(array('code'=>-1,'data'=>'請求資料不存在!')));
}
}
效果如下
到此就完成了需要的效果,如果狀態是有分支的,處理方式是一樣的,只是需要在後臺先組裝好資料結構就可以了!