easyui datagrid 建立帶Toolbar的表格（1）
阿新 • • 發佈：2018-12-05
<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", fitColumns : "true", striped : true, rownumbers:true, checkOnSelect : 'true', toolbar : "#tbdgUserInfo", columns : [ [ { field : 'itemid', title : 'Order ID', width : 200, checkbox : true }, { field : 'productid', title : 'Quantity', width : 100, align : 'right' }, { field : 'unitcost', title : 'Unit Price', width : 100, align : 'right' }] ] }); }); function searchFunc(){ alert("查詢"); } </script> </head> <body> <div id="dg" style="width:650px;height:250px"></div> <div id="tbdgUserInfo" style="padding:5px 10px;"> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="editUserFunc('新增','icon-add','insertUsers')">新增</a> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" onclick="editUserFunc('修改','icon-edit','updatetUsers')">修改</a> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cut',plain:true" onclick="delUserFunc()">刪除</a> <input class="easyui-textbox" id="searchName" data-options="onClickButton:function(){searchFunc()},buttonText:'查詢',buttonIcon:'icon-search',prompt:'價格...'" style="width:200px;height:24px;"> </div> </body> </html>