
以下是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出标签页标题。
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)