easyui datagrid 自定义按钮列(4)

1.源码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="jquery,ui,easy,easyui,web">
<meta name="description"
content="easyui help you build your web page easily!">
<title>创建Datagrid按钮列</title>
<link rel="stylesheet" type="text/css"
href="./javascript/jquery-easyui-1.5.1/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
href="./javascript/jquery-easyui-1.5.1/themes/icon.css">
<link rel="stylesheet" type="text/css"
href="./javascript/jquery-easyui-1.5.1/demo/demo.css">
<script type="text/javascript"
src="./javascript/jquery-easyui-1.5.1/jquery.min.js"></script>
<script type="text/javascript"
src="./javascript/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function() {
$('#dg').datagrid({
url : "./javascript/jquery-easyui-1.5.1/datagrid_data.json",
singleSelect : "true",
fitColumns : "true",
striped : true,
checkOnSelect : 'true',
columns : [ [ {
field : 'itemid',
title : 'Order ID',
width : 200
}, {
field : 'productid',
title : 'Quantity',
width : 100,
align : 'right'
}, {
field : 'unitcost',
title : 'Unit Price',
width : 100,
align : 'right'
}, {
field : 'op',
title : '编辑',
width : 100,
align : 'right',
formatter : formatOpt
}, {
field : 'operate',
title : '操作',
width : 100,
align : 'center',
formatter : function(value,row,index){
var paramvalue = JSON.stringify(row.itemid);
        var str = '<a href="#this" title="编辑" class="easyui-tooltip" ' 
        + 'onclick=editInfor('+paramvalue+')>' 
        + '<img src="http://www.easyicon.net/api/resizeApi.php?id=1201045&size=16" class="operate-button"></a>';
        return str;
        }
} ] ]
});
});


function formatOpt(value, row, index) {
var paramvalue = JSON.stringify(row.itemid);
return '<a href="#" onclick=editInfor(' + paramvalue + ')>编辑</a>';
}


function editInfor(paramvalue) {
alert("内容"+paramvalue);
}
</script>
</head>
<body>
<h2>创建Datagrid按钮列</h2>
<div id="dg" style="width:650px;height:250px"></div>
</body>
</html>

注释：value指当前单元格的值,row,当前行对象,index当前行的索引

2.datagrid_data.json测试数据

{"total":10,"rows":[
{"orderid":"FI-SW-01","quantity":10.00,"unitprice":"P"},
{"orderid":"K9-DL-01","quantity":12.00,"unitprice":"P"},
{"orderid":"RP-SN-01","quantity":12.00,"unitprice":"P"},
{"orderid":"RP-LI-02","quantity":12.00,"unitprice":"P"},
{"orderid":"FL-DSH-01","quantity":12.00,"unitprice":"P"},
{"orderid":"FL-DSH-01","quantity":12.00,"unitprice":"P"},
{"orderid":"FL-DLH-02","quantity":12.00,"unitprice":"P"},
{"orderid":"FL-DLH-02","quantity":12.00,"unitprice":"P"},
{"orderid":"RP-SN-01","quantity":12.00,"unitprice":"P"},
{"orderid":"AV-CB-01","quantity":92.00,"unitprice":"P"}
]}

3.效果

easyui datagrid 自定义按钮列(4)

猜你喜欢