jquery easyui中datagrid 中的动态接受后台传的数据
2018-03-02 15:30
369 查看
摘要: 在开发中遇到一个问题,就是从后台传过的数据,字段数量和数据是不固定的,所以要对datagrid 方法进行改进1.前台返回数据
controller 方法要加上@ResponseBody
这里的 list 是数据集合 ele 是字段集合
2.js接受数据
$.ajax({
type: "post",
url: $("#baseUrl").val()+"/query/queryTab",
data: JSON.stringify(data),
success : function(data) {
//加载数据
if(eval(data) == ""){
}else{
//调列表显示
list(eval(data.list),data.ele)
}
},
error : function() {
alert('查询名称异常');
}
});
3.dg方法中
//查询结果列表
function list(data,ele){
$('#dg').datagrid({
//title:"详细信息",
rownumbers:true,
singleSelect:true,
pagination:true,
pageSize:20,
loadMsg:"数据加载中...",
width:'auto',
height:'auto',
left:"100px",
toolbar:"#tb",
columns:getColumns(ele), //列名
loadFilter:pagerFilter //分页
}).datagrid('loadData', getDataAll(data,ele));
}
function fixWidthTable(percent){
return getWidth(0.8) * percent;
}
function getWidth(percent){
return $(window).width() * percent;
}
//数据
function getDataAll(data,ele){
var rows = [];
for(var i=0; i<data.length; i++){
var ff="{" ;
for(var n=0; n<ele.length; n++){
if(n==ele.length-1){
var name =ele
var val = eval("data[i]."+name)
ff = ff+"\""+ name+"\"";
ff=ff+":"
ff = ff+val
}else{
var name =ele
var val = eval("data[i]."+name)
ff = ff+"\""+ name+"\"";
ff=ff+":"
ff = ff+val
ff = ff+","
}
}
ff =ff +"}";
var oj = JSON.parse(ff)
rows.push(
oj
);
}
return rows;
}
//列名
function getColumns(ele){
var s = "";
s = "[[";
var width = 1/ele.length
for(var i=0; i<ele.length; i++){
if(i==ele.length-1){
s=s+"{field:'"+ele[i]+"',title:'"+ele[i]+"',width:fixWidthTable("+width+"),halign: 'center',align:'center',formatter: "
+ "function(value,row,index){"
+ " return '<span >'+ value+'</span>';"
+" } }";
}else{
s=s+"{field:'"+ele[i]+"',title:'"+ele[i]+"',width:fixWidthTable("+width+"),halign: 'center',align:'center',formatter: "
+ "function(value,row,index){"
+ " return '<span >'+ value+'</span>';"
+" } },";
}
}
s = s + "]]";
return eval(s);
}
//分页
function pagerFilter(data){
if (typeof data.length == 'number' && typeof data.splice == 'function'){
data = {
total: data.length,
rows: data
}
}
var dg = $(this);
var opts = dg.datagrid('options');
var pager = dg.datagrid('getPager');
pager.pagination({
pageList: [20,40,60],//[10,20,50,100]选择每页显示的记录数的下拉框的值。
onRefresh:function(){search()},
onSelectPage:function(pageNum, pageSize){
opts.pageNumber = pageNum;
opts.pageSize = pageSize;
pager.pagination('refresh',{
pageNumber:pageNum,
pageSize:pageSize
});
dg.datagrid('loadData',data);
}
});
if (!data.originalRows){
data.originalRows = (data.rows);
}
var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
var end = start + parseInt(opts.pageSize);
data.rows = (data.originalRows.slice(start, end));
return data;
}
写的不好 各位提意见
controller 方法要加上@ResponseBody
这里的 list 是数据集合 ele 是字段集合
2.js接受数据
$.ajax({
type: "post",
url: $("#baseUrl").val()+"/query/queryTab",
data: JSON.stringify(data),
success : function(data) {
//加载数据
if(eval(data) == ""){
}else{
//调列表显示
list(eval(data.list),data.ele)
}
},
error : function() {
alert('查询名称异常');
}
});
3.dg方法中
//查询结果列表
function list(data,ele){
$('#dg').datagrid({
//title:"详细信息",
rownumbers:true,
singleSelect:true,
pagination:true,
pageSize:20,
loadMsg:"数据加载中...",
width:'auto',
height:'auto',
left:"100px",
toolbar:"#tb",
columns:getColumns(ele), //列名
loadFilter:pagerFilter //分页
}).datagrid('loadData', getDataAll(data,ele));
}
function fixWidthTable(percent){
return getWidth(0.8) * percent;
}
function getWidth(percent){
return $(window).width() * percent;
}
//数据
function getDataAll(data,ele){
var rows = [];
for(var i=0; i<data.length; i++){
var ff="{" ;
for(var n=0; n<ele.length; n++){
if(n==ele.length-1){
var name =ele
var val = eval("data[i]."+name)
ff = ff+"\""+ name+"\"";
ff=ff+":"
ff = ff+val
}else{
var name =ele
var val = eval("data[i]."+name)
ff = ff+"\""+ name+"\"";
ff=ff+":"
ff = ff+val
ff = ff+","
}
}
ff =ff +"}";
var oj = JSON.parse(ff)
rows.push(
oj
);
}
return rows;
}
//列名
function getColumns(ele){
var s = "";
s = "[[";
var width = 1/ele.length
for(var i=0; i<ele.length; i++){
if(i==ele.length-1){
s=s+"{field:'"+ele[i]+"',title:'"+ele[i]+"',width:fixWidthTable("+width+"),halign: 'center',align:'center',formatter: "
+ "function(value,row,index){"
+ " return '<span >'+ value+'</span>';"
+" } }";
}else{
s=s+"{field:'"+ele[i]+"',title:'"+ele[i]+"',width:fixWidthTable("+width+"),halign: 'center',align:'center',formatter: "
+ "function(value,row,index){"
+ " return '<span >'+ value+'</span>';"
+" } },";
}
}
s = s + "]]";
return eval(s);
}
//分页
function pagerFilter(data){
if (typeof data.length == 'number' && typeof data.splice == 'function'){
data = {
total: data.length,
rows: data
}
}
var dg = $(this);
var opts = dg.datagrid('options');
var pager = dg.datagrid('getPager');
pager.pagination({
pageList: [20,40,60],//[10,20,50,100]选择每页显示的记录数的下拉框的值。
onRefresh:function(){search()},
onSelectPage:function(pageNum, pageSize){
opts.pageNumber = pageNum;
opts.pageSize = pageSize;
pager.pagination('refresh',{
pageNumber:pageNum,
pageSize:pageSize
});
dg.datagrid('loadData',data);
}
});
if (!data.originalRows){
data.originalRows = (data.rows);
}
var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
var end = start + parseInt(opts.pageSize);
data.rows = (data.originalRows.slice(start, end));
return data;
}
写的不好 各位提意见
相关文章推荐
- jquery easyui中datagrid 中的动态接受后台传的数据
- jQuery easyui datagrid动态查询数据
- (转)扩展jquery easyui datagrid 之动态绑定列和数据
- JQuery EasyUI 根据数据动态生成datagrid,统计常用
- Jquery Easyui插件Datagrid获取后台mssql数据通过存储过程高效分页来获取
- JQuery EasyUI 根据数据动态生成datagrid
- jquery easyUI 中动态 改变 Datagrid中数据的方法
- jquery easyUI 中动态 改变 Datagrid中数据的方法
- easyui中根据后台数据动态改变datagrid的列
- 扩展jquery easyui datagrid 之动态绑定列和数据
- JQuery EasyUI 根据数据动态生成datagrid,统计常用
- dojo小例子(4)DataGrid对动态数据的增删
- 将datagrid表格数据导出为Excel(动态列)
- Jquery easyui 将前台数据根据后台数据进行转换
- 实现<table>标签的动态新增和后台接受<table>标签的方法
- Easyui-Datagrid实例-----动态加载数据生成Datagrid
- springMVC_后台自动接受map数据
- 动态的管理ASP.NET DataGrid数据列
- JQuery easyUI中datagrid查找数据后列别不显示前面的序号而是显示NAN
- 【项目实战】---为EasyUI DataGrid的某一动态加载数据列添加超链接,点击超链接触发Onclick方法