bootgrid插件+knockout.JS列表展示

时间:2021-05-04 20:38:37

var mpf = mpf || {};
mpf.viewModel = mpf.viewModel || {};
var myChartByProject;

mpf.viewModel.search = function (data) {
var self = this;
self.idField = data.idField || “FID”;
self.urls = data.urls;
self.resx = data.resx;
self.index = null;
self.dataSource = ko.mapping.fromJS(data.dataSource);
self.form = ko.mapping.fromJS(data.form);
delete self.form.ko_mapping;

this.defaulltFormatters = {
"FIDFormatter": function (column, row) { return row.Name; },
"DateFormatter": function (column, row) {
//对比一下,如果是最小时间或者没有初始化时间,则清空
var tempDate = utils.formatDate(eval("row." + column.id), "yyyy-MM-dd");
if (new Date(tempDate) > new Date("2001-01-01")) {
return tempDate;
}
else {
return "";
}
},
};

$("#gridlist").bootgrid({
ajaxSettings: {
method: "GET",
cache: false
},
ajax: true,
selection: false,
rowSelect: true,
sorting: true,
labels:
{
noResults: bootgrid_noResults, //多语言
all: bootgrid_all,
loading: bootgrid_loading,
refresh: bootgrid_refresh,
search: bootgrid_search,
infos: bootgrid_infos
},
url: "/api/UserCenter/UM/UMAppointment/Pagging", //请求地址
post: function () {
/* To accumulate custom parameter with the request object */
var result = ko.toJS(self.form); //请求的参数
result.sort = utils.GetCustomerOrderInfo(true);
result.order = utils.GetCustomerOrderInfo(false);
return result;
},
converters: {
datetime: {
from: function (value) {
return moment(value, "YYYY-MM-DD");
},
to: function (value) {
return value.format("LL");
}
}
},
formatters: self.defaulltFormatters
}).on("load.rs.jquery.bootgrid", function (e) {
self.index = com.loading();
}).on("loaded.rs.jquery.bootgrid", function (e) {
com.closeLoading(self.index);
var totalRowCount = $("#gridlist").bootgrid("getTotalRowCount");
//如果没有数据,则隐藏分页控件
if (totalRowCount <= 0) {
if (!$("#gridlist").parent().hasClass("bootgrid-hiddenInfoBar")) {
$("#gridlist").parent().addClass("bootgrid-hiddenInfoBar");
}
}
else {
if ($("#gridlist").parent().hasClass("bootgrid-hiddenInfoBar")) {
$("#gridlist").parent().removeClass("bootgrid-hiddenInfoBar");
}
}
});

};

var UMAppointmentIndex = {
Status: 0,
IsDisplay: false,
FID: '',
Init: function () {
UMAppointmentIndex.Status = $("#status").val();
UMAppointmentIndex.ChangeTabStatus(UMAppointmentIndex.Status, 0);
}, ChangeTabStatus: function (val, type) {
UMAppointmentIndex.Status = val;
$("#status").val(val).change();
switch (val) {
case "0":
$("#tab li all").removeClass("curr").addClass("curr");
$("#tab_li_wait").removeClass("curr");
$("#tab_li_accomplish").removeClass("curr");
break;
case "3":
$("#tab_li_all").removeClass("curr");
$("#tab_li_wait").removeClass("curr").addClass("curr");
$("#tab_li_accomplish").removeClass("curr");
break;
case "2":
$("#tab_li_all").removeClass("curr");
$("#tab_li_wait").removeClass("curr");
$("#tab_li_accomplish").removeClass("curr").addClass("curr");
break;
}
if (type != 0) {
UMAppointmentIndex.AppointmentLodingData();
}
}, AppointmentLodingData: function () {
$("#gridlist").bootgrid("deselect");
$("#gridlist").bootgrid("clear");
$("#gridlist").bootgrid("reload");
}, ProductPutaway: function (vid) {
//同意预约提示框
UMAppointmentIndex.IsDisplay = true;
UMAppointmentIndex.FID = vid;
com.confirmLayer("您确定要同意预约吗?", UMAppointmentIndex.UpdateIsDisplay);
}, ProductSoldOut: function (vid) {
//拒绝预约提示框
UMAppointmentIndex.IsDisplay = false;
UMAppointmentIndex.FID = vid;
com.confirmLayer("您确定要拒绝预约吗?", UMAppointmentIndex.UpdateIsDisplay);
},
UpdateIsDisplay: function () {
com.closeLayer();
$.get("/api/UserCenter/UM/UMAppointment/AuditAppointment", { id: UMAppointmentIndex.FID, auditResult: UMAppointmentIndex.IsDisplay }, function (data) {
if (data) {
if (data.IsTrue) {
com.succeedMessage("操作成功!");
UMAppointmentIndex.AppointmentLodingData();
//setTimeout(function () { window.location.reload(); }, 1000);
} else {
if (data.ValidationList.length > 0) {
com.errorMessage(data.ValidationList[0].Value);
} else {
com.errorMessage("操作失败,请重新操作!");
}
}
}
});
}, LoadInitStatisticsPeriodType: function () {
//预约时间段
var dom = document.getElementById("main");
var myChart = echarts.init(dom);
$.get("/api/UserCenter/UM/UMAppointment/GetStatisticsPeriodType", {}, function (data) {
if (data != null && data.length > 0) {
var vjson = eval("(" + data + ")");
var vname = new Array();
var vjsd = "";
var vdata;
$.each(vjson, function (index, item) {
vname[index] = item.Name;
vjsd += "{\"value\":" + item.Value + ",\"name\":\"" + item.Name + "\"},";
});
if (vjsd.length > 0) {
vjsd = "[" + vjsd.substring(0, vjsd.length - 1) + "]";
vdata = eval("(" + vjsd + ")");
}
option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
data: vname
},
series: [
{
name: '预约时间段',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '20',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data: vdata
}
]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
}
});
},
LoadInitStatisticsResultType: function () {
//预约统计
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
$.get("/api/UserCenter/UM/UMAppointment/GetStatisticsResultType", {}, function (data) {

var datatime;
var ResultType;
// var list = [
//{ "Date": "2016-11-12", "ResultType": "等待确认", "Value": "1", "Tag": null, "IsFromCached": false, "IsSuccess": true, "IsAuth": false, "IsMustAuth": false, "ErrorList": [], "ValidationList": [], "series": [120, 132, 101, 134, 90, 230, 210] },
//{ "Date": "2016-11-18", "ResultType": "已确认", "Value": "1", "Tag": null, "IsFromCached": false, "IsSuccess": true, "IsAuth": false, "IsMustAuth": false, "ErrorList": [], "ValidationList": [], "series": [220, 182, 191, 234, 290, 330, 310] },
//{ "Date": "2016-12-17", "ResultType": "预约成功", "Value": "1", "Tag": null, "IsFromCached": false, "IsSuccess": true, "IsAuth": false, "IsMustAuth": false, "ErrorList": [], "ValidationList": [], "series": [150, 232, 201, 154, 190, 330, 410] }
// ];
var data = $.parseJSON(data);//把data转换成json
var arr = new Array();
var xAxis = new Array();
var seires_data = new Array();
for (i = 0; i < data.length; i++) {
var riqi = data[i].Date;
var arys1 = new Array();
arys1 = riqi.split('-'); //日期为输入日期,格式为 2013-3-10
var ssdate = new Date(arys1[0], parseInt(arys1[1] - 1), arys1[2]);
ssdate.getDay()
var d = new Date();
var day = new Array(7);
day[0] = "星期日"
day[1] = "星期一"
day[2] = "星期二"
day[3] = "星期三"
day[4] = "星期四"
day[5] = "星期五"
day[6] = "星期六"
var datatime = day[ssdate.getDay()];
var ResultType = data[i].ResultType;
var series = data[i].series;

var obj = new Object();
obj.name = ResultType;
obj.type = 'line';
obj.stack = '总量';
obj.data = series;

arr.push(ResultType);
xAxis.push(datatime);
seires_data.push(obj);
}


option = {
title: {
text: null
},
tooltip: {
trigger: 'axis'
},
legend: {
data: arr
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: xAxis
},
yAxis: {
type: 'value'
},
series: seires_data
};



if (option && typeof option === "object") {
myChart.setOption(option, true);
}

});
}, FiltrationData: function (obj, mark) {
$.each(obj, function (index, item) {
if (mark == index.ResultType) {

}
});
}, unique: function (arr) {
var tmp = new Array();
for (var i in arr) {
if (tmp.indexOf(arr[i]) == -1) {
tmp.push(arr[i]);
}
}
return tmp;
}, showData: function (data) {

}

}

$(function () {
UMAppointmentIndex.Init();
UMAppointmentIndex.LoadInitStatisticsPeriodType();
UMAppointmentIndex.LoadInitStatisticsResultType();
});