Bootstrap

layui table动态表头

页面

<#--浏览查询右侧信息项表格展示界面-->
<#import "/gdsp/tags/castle.ftl" as c>
<@c.Script src="script/search/search"/>

<script type="text/html" id="infoItemInst_cdTpl">
	<a href="javascript:void(0)" style="color:#00F; font-size:14px; text-decoration:none" onMouseOver="this.style.color='#F00'; this.style.textDecoration='underline'" onMouseOut="this.style.color='#00F'; this.style.textDecoration='none'" onclick="detailInfoItem('{{d.id}}')">
		{{d.inst_cd}}
	</a>
</script>
<script>
function infoItemRelTpl(d) {
	var html = d.attr8;
	$.ajax({
		type : "POST",
		url : __contextPath + "/search/searchManage/infoItemRel.d",
		data : {
			code:d.attr8
		},
		async:false, 
		dataType:"json",
		success : function(ajaxResult) {
			if(ajaxResult == 1){
				html = '<a href="javascript:void(0)" style="color:#00F; font-size:14px; text-decoration:none" onMouseOver="this.style.color=\'#F00\'; this.style.textDecoration=\'underline\'" onMouseOut="this.style.color=\'#00F\'; this.style.textDecoration=\'none\'" onclick="referenceCode(\''+d.id+'\')">'+d.attr8+'</a>';
			}
		}
	});
	return html;
}
</script>
<table id="grid_array_infoItem" lay-filter="grid_array_infoItem">
<script type="text/javascript">
    var nodeCode = "${nodeCode}";//el表达式取值只能在页面取(jsp或ftl等),js中不能用
    initInfoItemTable(nodeCode);  //页面初始化时调用table初始化方法
</script>

JS

function initInfoItemTable(nodeCode){
	var attrListJson = '';
	var attrCols = [[
		{field:'infoItemId',type: 'checkbox', width:60,fixed: 'left'},
		{field:'map_flg',title: "映射状态",sort: true, fixed: 'left'},
		{field:'inst_cd',title:"信息项编号",width:115,sort: true, fixed: 'left',templet:'#infoItemInst_cdTpl'},
		{field:'inst_nm',title:"中文名称",width:115,sort: true, fixed: 'left'},
		{field:'stat_cont',title:"标准状态", sort: true}
	]]
	//获取动态表头
	$.ajax({
		type:"get",
		url: context + "/standardTree/standardTreeManage/getAtrrDataCols.d?clsCodeCls=InfoItem",
		dataType : "JSON",
		success:function(data){
			attrListJson = data;//不需要用$.parseJSON(data)转换格式,用了会报错
			initTable(attrListJson);//获取表头成功后初始化表格
		},
		error:function(){
			$F.messager.warn("获取列表表头信息失败");
		}
	});
	//初始化table
	function initTable(attrListJson){
		//动态拼接表头
		for (var i=0;i<attrListJson.length;i++){
        	var obj = {};
			if(attrListJson[i].attrStoreId =='attr8'){
				obj = {field:'attr8', title:"引用代码",sort: true, templet:infoItemRelTpl};
			}else{
				obj = {field:attrListJson[i].attrStoreId, title:attrListJson[i].attrName,sort: true};
			}
			attrCols[0].push(obj);
		}
		attrCols[0].push({field:'pub_person',title:"发布人", sort: true});
		//渲染table
		layui.use("table", function() {
			var table = layui.table;  
			table.render({
			    elem:"#grid_array_infoItem",
			    url:context + "/search/searchManage/searchInfoItem.d?standardCode="+nodeCode,
			    page:true ,// 开启分页
			    cellMinWidth:105,
			    even:false,//隔行背景
			    request:{
			        pageName : "_pageNo",
			        limitName : "_pageSize"
			    },
			    cols: attrCols
			});
		});
	}
}

controller

 //import net.sf.json.JSONArray
 @RequestMapping("/getAtrrDataCols.d")
    @ResponseBody
    @ViewWrapper(wrapped = false, onlyAjax = true)//不加这句clsCodeCls为空,原因未知
    public Object getAtrrDataCols(HttpServletRequest req,String clsCodeCls){
    	List<Map<String, Object>> attrList = (List<Map<String, Object>>) req.getSession().getAttribute("attrs");
    	if(attrList==null){
    		attrList = searchService.queryShowAttrListByClsCode(clsCodeCls);
    		req.getSession().setAttribute("attrs", attrList);
    	}
    	return JSONArray.fromObject(attrList);//map集合转json,不能用对象集合,空值的字段转换时会报错
    }

impl

    /**
     * 根据元数据类型查询显示属性列表
     * @param ownedClsId 元数据类型
     * @return
     */
    @Override
    public List<Map<String, Object>> queryShowAttrListByClsCode(String ownedClsId){
    	return searchdao.queryShowAttrListByClsCode(ownedClsId);
    }

dao

/**
     * 根据元数据类型查询显示属性列表
     * @param ownedClsId 元数据类型
     * @return
     */
    List<Map<String, Object>> queryShowAttrListByClsCode(@Param("ownedClsId")String ownedClsId);//mybatis 返回map集合用List<Map<String, Object>> 

xml

<!-- 根据元数据类型查询显示属性列表 -->
<!-- mybatis返回map集合  resultType="java.util.HashMap"-->
	<select id="queryShowAttrListByClsCode" resultType="java.util.HashMap">
		SELECT
			ts.ATTR_ID as attrId,
			ts.CLASF_CD as ownedClsId,
			LOWER(ts.ATTR_STORE_ID) attrStoreId,
			ta.ATTR_NM as attrName,
			ta.ATTR_CD as attrCode
		FROM
			t_med_mm_att_store ts,
			t_med_mm_att ta
		WHERE
			ts.ATTR_ID = ta.ATTR_ID
		AND ta.CLASF_CD = #{ownedClsId}
		AND ta.SHOW_FLG = 'Y'
		ORDER BY ts.ATTR_STORE_ID
	</select>
;