/*
|
*文件名称：JqxGridAPI.js
|
*API功能描述：封装简单的jqxgrid表格
|
使用方式：需要提前引用jqxgrid的相关js文件需要引用TJAPP.Common.js文件 JqxGridAPI.FillJqxGrid("grid", TJAPP.WebServiceUrl.ElectTable_test_Server, "TestJson", { a: "a", b: "b" }, 5, function (obj) {});
|
*作者：张恒
|
*编写时间：20180429
|
*/
|
|
var JqxGridAPI = {
|
/*
|
*每页显示数量
|
*/
|
pagesize: 10,
|
pagesizeoptions: [10, 20, 30],
|
/*
|
*参数
|
*作者：张恒
|
*编写时间：20180429
|
*/
|
args: {},
|
/*
|
*API功能描述：封装简单的jqxgrid表格
|
*container:容器id url 请求的服务地址 functionName请求的方法名称 arg 请求参数{ a: "a", b: "b" } pagesie 每页显示数量 callabck 回调函数
|
*作者：张恒
|
*编写时间：20180429
|
*/
|
FillJqxGrid: function (container, url, functionName, gridHeight, callback) {
|
///前端显示列的集合
|
var columns = [];
|
var dataItem = [];
|
var gjzd="";
|
///数据集合
|
var rows = null;
|
///配置数据源
|
var source =
|
{
|
datatype: "json",
|
url: url + "/" + functionName,
|
pagenum: 0,
|
pagesize: JqxGridAPI.pagesize,
|
pager: function (pagenum, pagesize, oldpagenum) {
|
},
|
root: "rows",
|
//sort: function () {
|
// //$("#" + container).jqxGrid('updatebounddata', 'sort');
|
//},
|
sortcolumn: "",
|
sortdirection: "asc",
|
datatype: "json",//服务返回的数据类型
|
type: "POST",//默认为GET
|
data: JqxGridAPI.args,//定义发送到服务器的默认参数
|
processdata: function (data) {//对data属性的扩展
|
//data.param = "abcde";
|
},
|
beforeprocessing: function (data) { //请求后的回调函数,data是查询方法返回的数据
|
if (data.total != -1)
|
source.totalrecords = data.total;
|
if (data.columns && data.columns.length >= 12) {
|
$.each(data.columns, function (key, value) {
|
value.width = 150;
|
})
|
}
|
if (JqxGridAPI.args.width) {
|
$.each(data.columns, function (key, value) {
|
value.width = JqxGridAPI.args.width;
|
})
|
}
|
if (data.rows)
|
{
|
$.each(data.rows, function (key, value) {
|
//var
|
$.each(value, function (k, val) {
|
|
|
if (typeof val === 'number' && !isNaN(val) && parseFloat(val).toString().indexOf(".") >= 0) {
|
data.rows[key][k] = parseFloat(val).toFixed(2);
|
}
|
});
|
});
|
}
|
|
|
columns = data.columns;
|
dataItem = data.rows;
|
gjzd = data.gjzd;
|
}
|
};
|
///配置数据源
|
var dataAdapter = new $.jqx.dataAdapter(source, {
|
formatData: function (data) {
|
$.extend(data, JqxGridAPI.args);
|
return data;
|
}
|
});
|
$("#" + container).jqxGrid(
|
{
|
//width: TJAPP.GetGridWidth.testGridWidth,
|
//autoheight: true,
|
height: gridHeight,
|
width: "100%",
|
source: dataAdapter,
|
columnsresize: true,//设置列间距可调整
|
pageable: true,
|
sortable: true,
|
pagermode: 'default',
|
pagesizeoptions: JqxGridAPI.pagesizeoptions,//可选择每页显示条数
|
virtualmode: true,
|
rendergridrows: function (obj) {
|
return obj.data;
|
},
|
columns: columns,
|
cellhover:function(element,x,y){
|
// $()
|
},
|
altrows:true
|
});
|
|
///数据完成绑定事件
|
$("#" + container).on("bindingcomplete", function (event) {
|
try {
|
columns= _.remove(columns,function(item){
|
return item.datafield !='datadescription'
|
});
|
|
if ($('#' + container).jqxGrid("columns").length() == 0)
|
$('#' + container).jqxGrid({
|
columns: columns
|
});
|
//$("#" + container).jqxGrid('autoresizecolumns');
|
$("#" + container).jqxGrid("endupdate");
|
if (typeof callback == 'function') {
|
callback({ item: $('#' + container).jqxGrid(), columns: columns, dataItem: dataItem, source: source,gjzd:gjzd });
|
}
|
|
} catch (e) { }
|
});
|
JqxGridAPI.Columnclick(container, source);
|
},
|
FillJqxGrid_XC: function (container, url, functionName, gridHeight, callback) {
|
this.gridHeight = gridHeight;
|
///前端显示列的集合
|
var columns = [];
|
var dataItem = [];
|
var gjzd = "";
|
///数据集合
|
var rows = null;
|
///配置数据源
|
var source =
|
{
|
datatype: "json",
|
url: url + "/" + functionName,
|
pagenum: 0,
|
pagesize: JqxGridAPI.pagesize,
|
pager: function (pagenum, pagesize, oldpagenum) {
|
},
|
root: "rows",
|
//sort: function () {
|
// $("#" + container).jqxGrid('updatebounddata', 'sort');
|
//},
|
sortcolumn: "",
|
sortdirection: "asc",
|
datatype: "json",//服务返回的数据类型
|
type: "GET",//默认为GET
|
data: JqxGridAPI.args,//定义发送到服务器的默认参数
|
processdata: function (data) {//对data属性的扩展
|
//data.param = "abcde";
|
},
|
beforeprocessing: function (data) { //请求后的回调函数,data是查询方法返回的数据
|
if (data.total != -1)
|
source.totalrecords = data.total;
|
if (data.columns && data.columns.length >= 12) {
|
$.each(data.columns, function (key, value) {
|
value.width = 150;
|
})
|
}
|
if (JqxGridAPI.args.width) {
|
$.each(data.columns, function (key, value) {
|
value.width = JqxGridAPI.args.width;
|
})
|
}
|
if (data) {
|
$.each(data.rows, function (key, value) {
|
//var
|
$.each(value, function (k, val) {
|
|
|
if (typeof val === 'number' && !isNaN(val) && parseFloat(val).toString().indexOf(".") >= 0) {
|
data.rows[key][k] = parseFloat(val).toFixed(2);
|
}
|
});
|
});
|
}
|
columns = data.columns;
|
dataItem = data.rows;
|
gjzd = data.gjzd;
|
}
|
};
|
///配置数据源
|
var dataAdapter = new $.jqx.dataAdapter(source, {
|
formatData: function (data) {
|
$.extend(data, JqxGridAPI.args);
|
return data;
|
}
|
});
|
$("#" + container).jqxGrid(
|
{
|
//width: TJAPP.GetGridWidth.testGridWidth,
|
//autoheight: true,
|
height: this.gridHeight,
|
width: "100%",
|
source: dataAdapter,
|
columnsresize: true,//设置列间距可调整
|
pageable: true,
|
sortable: true,
|
pagermode: 'default',
|
pagesizeoptions: JqxGridAPI.pagesizeoptions,//可选择每页显示条数
|
virtualmode: true,
|
rendergridrows: function (obj) {
|
return obj.data;
|
},
|
columns: columns
|
});
|
|
///数据完成绑定事件
|
$("#" + container).on("bindingcomplete", function (event) {
|
try {
|
if ($('#' + container).jqxGrid("columns").length() == 0)
|
$('#' + container).jqxGrid({
|
columns: columns
|
});
|
//$("#" + container).jqxGrid('autoresizecolumns');
|
$("#" + container).jqxGrid("endupdate");
|
if (typeof callback == 'function') {
|
callback({ item: $('#' + container).jqxGrid(), columns: columns, dataItem: dataItem, source: source, gjzd: gjzd });
|
}
|
} catch (e) {
|
console.log(e.message);
|
}
|
});
|
JqxGridAPI.Columnclick(container, source);
|
},
|
/*
|
*API功能描述：清空表格
|
*container:容器id
|
*作者：张恒
|
*编写时间：20180429
|
*/
|
ClearnJqxGrid: function (container) {
|
$('#' + container).jqxGrid('clear');
|
},
|
/*
|
*API功能描述：销毁表格
|
*container:容器id
|
*作者：张恒
|
*编写时间：20180429
|
*/
|
DestoryJqxGrid: function (container) {
|
$('#' + container).jqxGrid('destroy');
|
},
|
|
/*
|
*API功能描述：销毁表格
|
*container:容器id
|
*作者：张恒
|
*编写时间：20180429
|
*/
|
ApplyfiltersJqxGrid: function (container) {
|
$('#' + container).jqxGrid('applyfilters');
|
},
|
Columnclick: function (container, source) {
|
$("#" + container).on("columnclick", function (event) {
|
var sortinformation = $('#' + container).jqxGrid('getsortinformation');
|
|
var sortdirection = sortinformation.sortdirection.ascending ? "asc" : "desc";
|
// column data field.
|
var sortColumnDataField = sortinformation.sortcolumn;
|
//JqxGridAPI.SortJqxGrid(container, sortColumnDataField, sortdirection);
|
source.sortdirection = sortdirection;
|
source.sortcolumn = sortColumnDataField;
|
JqxGridAPI.UpdateBoundDataCells(container);
|
});
|
},
|
/*
|
*API功能描述：刷新表格
|
*container:容器id
|
*作者：张恒
|
*编写时间：20180429
|
*/
|
RefreshJqxGrid: function (container) {
|
$('#' + container).jqxGrid('refresh');
|
},
|
/*
|
*API功能描述：刷新表格数据
|
*container:容器id
|
*作者：张恒
|
*编写时间：20180429
|
*/
|
RefreshJqxGridData: function (container) {
|
$('#' + container).jqxGrid('refreshdata');
|
},
|
/*
|
*API功能描述：表格排序
|
*container:容器id
|
*作者：张恒
|
*编写时间：20180429
|
*/
|
SortJqxGrid: function (container, sortfield, sort) {
|
$('#' + container).jqxGrid('sortby', sortfield, sort);
|
},
|
|
UpdateBoundDataCells: function (container) {
|
$("#" + container).jqxGrid("updatebounddata", "cells");
|
},
|
/*
|
*API功能描述：刷新表格数据
|
*container:容器id
|
*作者：张恒
|
*编写时间：20180429
|
*/
|
GoToPage: function (container, pageindex) {
|
$('#' + container).jqxGrid('gotopage', pageindex);
|
},
|
|
/*
|
*API功能描述：当前页改变事件
|
*container:容器id
|
*作者：张恒
|
*编写时间：20180429
|
*/
|
PageChange: function (container, callback) {
|
$('#' + container).on('pagechanged', function (event) {
|
callback(event);
|
});
|
},
|
|
/*
|
*API功能描述：封装简单的jqxgrid表格的行点击事件 此事件用在filljqxgrid之后
|
*jqxgrid:FillJqxGrid的回调参数 callabck 回调函数 返回点击行的数据
|
*作者：张恒
|
*编写时间：20180429
|
*/
|
RowDoublecClick: function (jqxgrid, callback) {
|
jqxgrid.on('rowdoubleclick', function (event) {
|
var args = event.args;
|
var boundIndex = args.rowindex;
|
var rowdata = jqxgrid.jqxGrid('getrowdata', boundIndex);
|
if (typeof callback == 'function') {
|
callback({ data: rowdata });
|
}
|
});
|
},
|
|
/*
|
*API功能描述：封装简单的jqxgrid表格的行点击事件 此事件用在filljqxgrid之后
|
*jqxgrid:FillJqxGrid的回调参数 callabck 回调函数 返回点击行的数据
|
*作者：张恒
|
*编写时间：20180429
|
*dataFields: [
|
{ name: 'label', type: 'string' },
|
{ name: 'value', type: 'string' }
|
],
|
*array:[
|
{ value: "AF", label: "Afghanistan" },
|
{ value: "AL", label: "Albania" },
|
{ value: "DZ", label: "Algeria" },
|
{ value: "AR", label: "Argentina" },
|
{ value: "AM", label: "Armenia" },
|
{ value: "AU", label: "Australia" },
|
{ value: "AT", label: "Austria" }
|
];
|
*/
|
FillJqxGridLocalData: function (container, datafields, array, columns, callback) {
|
//var array1 =
|
var countriesSource =
|
{
|
datatype: "array",
|
datafields: datafields,
|
localdata: array
|
};
|
|
var cAdapter = new $.jqx.dataAdapter(countriesSource);
|
///配置数据源
|
$("#" + container).jqxGrid(
|
{
|
//width: TJAPP.GetGridWidth.testGridWidth,
|
//autoheight: true,
|
height: "250",
|
width: "100%",
|
source: cAdapter,
|
columnsresize: true,
|
selectionmode: 'checkbox',
|
sortable: false,
|
pageable: false,
|
pagermode: 'none',
|
pagesizeoptions: JqxGridAPI.pagesizeoptions,//可选择每页显示条数
|
virtualmode: false,
|
rendergridrows: function (obj) {
|
return obj.data;
|
},
|
columns: columns
|
});
|
///数据完成绑定事件
|
//$("#" + container).on("bindingcomplete", function (event) {
|
// if ($('#' + container).jqxGrid("columns").length() == 0)
|
// $('#' + container).jqxGrid({
|
// columns: columns
|
// });
|
// $("#" + container).jqxGrid('autoresizecolumns');
|
// if (typeof callback == 'function') {
|
callback({ item: $('#' + container).jqxGrid() });
|
// }
|
//});
|
},
|
/*
|
*API功能描述：封装简单的jqxgrid表格的行点击事件 此事件用在filljqxgrid之后
|
*jqxgrid:FillJqxGrid的回调参数 callabck 回调函数 返回点击行的数据
|
*作者：张恒
|
*编写时间：20180429
|
*/
|
RowSelect: function (container, callback) {
|
$('#' + container).on('rowselect', function (event) {
|
// event arguments.
|
var args = event.args;
|
// row's bound index.
|
var rowBoundIndex = args.rowindex;
|
var rowData = args.row;
|
callback(rowData);
|
});
|
},
|
/*
|
*API功能描述：封装简单的jqxgrid表格的行点击事件 此事件用在filljqxgrid之后
|
*jqxgrid:FillJqxGrid的回调参数 callabck 回调函数 返回点击行的数据
|
*作者：张恒
|
*编写时间：20180429
|
*/
|
RowClick: function (jqxgrid, callback) {
|
jqxgrid.on('rowclick', function (event) {
|
var args = event.args;
|
var boundIndex = args.rowindex;
|
var rowdata = jqxgrid.jqxGrid('getrowdata', boundIndex);
|
if (typeof callback == 'function') {
|
callback({ data: rowdata });
|
}
|
});
|
},
|
/*
|
*API功能描述：封装简单的jqxgrid表格的单元格点击事件 此事件用在filljqxgrid之后
|
*jqxgrid:FillJqxGrid的回调参数 callabck 回调函数 返回点击行的数据
|
*作者：张恒
|
*编写时间：20180429
|
*/
|
CellClick: function (jqxgrid, callback) {
|
jqxgrid.on("cellclick", function (event) {
|
// event arguments.
|
var args = event.args;
|
// row's bound index.
|
var rowBoundIndex = args.rowindex;
|
// column index.
|
var columnindex = args.columnindex;
|
// column data field.
|
var dataField = args.datafield;
|
// cell value
|
var value = args.value;
|
if (typeof callback == 'function') {
|
callback({ value: value, dataField: dataField, columnindex: columnindex, rowindex: rowBoundIndex });
|
}
|
});
|
}
|
};
|
