easyui datagrid 自定義按鈕列(4)
阿新 • • 發佈:2018-12-05
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.效果