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

最新推荐文章于 2022-11-12 10:10:19 发布

yb305小白

最新推荐文章于 2022-11-12 10:10:19 发布

阅读量3k

点赞数

分类专栏： easyui

本文链接：https://blog.csdn.net/yb305/article/details/54378240

版权

easyui 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<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" οnclick="editUserFunc('添加','icon-add','insertUsers')">添加</a>
			<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" οnclick="editUserFunc('修改','icon-edit','updatetUsers')">修改</a>
			<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cut',plain:true" οnclick="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>

yb305小白

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
easyui datagrid 创建带Toolbar的表格（1）

<meta name="description" content="easyui help you build your web page easily!">创建带复选框的datagrid<link rel="stylesheet" type="text/css" href="./javascript/jquery-easyui-1.5.1/themes/default/easyui.cs
复制链接

扫一扫

专栏目录