easyui datagrid 创建带Toolbar的表格（1）

来源：互联网发布：lua windows api 编辑：程序博客网时间：2024/05/07 02:55
<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>
0 0