如何用easyui动态加载表格标题

如何用easyui动态加载表格标题,第1张

将包放在项目文件之下之后。

以下是html中的代码:

<table id="dg" style="width:100%height:95%" data-options="

rownumbers:false,

singleSelect:true,

autoRowHeight:false,

pagination:true,

resizeHandle:'right'">

<thead>

<tr>

</tr>

</thead>

</table>

以下是js代码,是easyui的一种内置写法.

$('#dg').datagrid({

url:'datagrid_data.json',

columns:[[

{field:'id',title:'公司自编码',width:100},

{field:'name',title:'公司名称',width:100},

{field:'coding',title:'编码',width:100},

]]

})

动态产生列的代码,其实就是按datagrid所需列的json格式,拼凑成字符串还可以实现列合并

//用字符串产生grid所需的列

function AddColspanGridColumn(fieldName, title, width, align, rowStyle, formatterStyle,colspan) {

var columnStr = ""

//Easyui的datagrid列的基本格式

columnStr = "{field: '" + fieldName + "', title: '" + title + "', width: " + width

//对齐方式

if (align != "" &&align != null &&align != undefined)

columnStr += ",align:'" + align + "'"

//是否合并列

if (colspan != 0 &&colspan != "" &&colspan != null &&colspan != undefined)

columnStr += ",colspan:" + colspan

//是否需要行样式

if (rowStyle != "" &&rowStyle != null &&rowStyle != undefined)

columnStr += ",styler: function (val, row, index) {return '" + rowStyle + "'}"

if (formatterStyle != "" &&formatterStyle != null &&formatterStyle != undefined)

columnStr += ",formatter: function (val, row, index) {" +

"if (val == '' || val == undefined) val = '0'" +

"return \"<span style='" + formatterStyle + "'>\"+val+\"</span>\"}"

columnStr += "}"

return columnStr

}

然后把产生的json字符串给datagrid,

var options = $("#" + gridName).datagrid("options")

var columnstr =

AddColspanGridColumn("AVG_PRICE", "户均价", 80, "left",

"background-color:#F6B03E",

"font-size:14pxfont-weight:bold",

0)

options.columns = eval(columnstr)

设置列内容为超链接,参考函数里的formatter,设置列的内容的

第一步,在创建的web项目EasyUI下,新建页面文件夹pages,并在该文件夹下创建页面tabs.html。

第二步,引入EasyUI核心JavaScript和CSS文件,并需要jQuery关键的js文件。

第三步,在body标签元素内插入Tabs标签元素div,并设置样式。

第四步,预览静态页面tabs.html。

第五步,利用tabs标签页自带的函数方法获取选中的tabs页标题。

第六步,再次预览该静态页面,点击其中之一的tabs子标签,这时会d出标签页标题。


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/bake/11751667.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-18
下一篇2023-05-18

发表评论

登录后才能评论

评论列表(0条)

    保存