easyui 表头动态生成
使用EasyUI实现列不固定的表格(需要引入easyUi中的jquery.easyui.min.js、easyui.css、icon.css),步骤如下:jsp页面:1.新建一个准备放table的div容器: 2.在页面加载好后,调用后台获取表头列信息: $(function(){ //先清空datagrid
使用EasyUI实现列不固定的表格(需要引入easyUi中的jquery.easyui.min.js、easyui.css、icon.css),步骤如下:
jsp页面:
1.新建一个准备放table的div容器:<div id="divDatagrid"> </div>
2.在页面加载好后,调用后台获取表头列信息:
<script type='text/javascript'>
$(function(){
//先清空datagrid
$('#divDatagrid').html('<table id="totalTb"></table>');//动态创建表
//通过ajax请求生成的新的datagrid的列名
$.ajax({
url:'请求表头json格式的url‘,
type:"POST",
dataType:'json',
data:{},
success:function(data){//获取表头数据成功后,使用easyUi的datagrid去生成表格
$('#totalTb').datagrid({
url: '请求表格数据的URL’,
fitColumns: true,
singleSelect:true,
idField:"appId",
columns:data,//外层ajax请求的表头json
queryParams:{},
onSelect:function(rowIndex, rowData){
alert(rowData.appId);
}//end of onSelect:function
});
},error:function(xhr){
alert('error');
}
});
});
</script>
最关键的是columns:data,data是后台组装好的
后台数据组装:
1.新建立个bean,用于设置column的相关属性(可自行根据EASYUI的列属性设置)如下:
public class ColumnInfo {
private String field;//列字段名称
private String title;//列标题文本
private int width;//列的宽度
private String align;//指明如何对齐列数据。可以使用的值有:'left','right','center'
//此处省略get set方法
}
2.组装表格头:
List<ColumnInfo> list = new ArrayList<ColumnInfo>();
list = mgmt.queryCityList(width);//调用service层去读数据,定义每个列字段名为'COL(动态ID)',如COL1、COL33、COL24
ColumnInfo info = new ColumnInfo();//固定的第一列,如没有,则不需要
info.setTitle("区域<div id='drawline'></div>名称");
info.setField("appName");
info.setWidth(120);
info.setAlign("center");
list.add(0,info);
List tmList = new ArrayList();//必须再套一层
tmList.add(list);
JSONArray jsonArray = JSONArray.fromObject(list);
getResponse().setContentType("text/html; charset=utf-8");
getResponse().getWriter().write(jsonArray.toString());
3.组装表数据:
因为列名不固定,此时无法创建bean,所以使用拼字符串的方式,如下所示:
StringBuffer eachBuffer = new StringBuffer("{\"appName\":\"").append(“墨迹天气”).append("\"");
eachBuffer.append(",\"appId\":\"").append(“app01”).append("\"");和表格头的列字段名相对应即可
更多推荐
所有评论(0)