在datagrid中的toolbar添加输入框

最新推荐文章于 2022-09-01 17:54:29 发布

李钊2442630393

最新推荐文章于 2022-09-01 17:54:29 发布

阅读量4.3k

点赞数

分类专栏： EasyUI

EasyUI 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

如何在jQuery easyui datagrid中添加输入框，只需要在toolbar中添加<input>如下

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>jQuery EasyUI</title>
	<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../themes/icon.css">
	<script type="text/javascript" src="../jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="../jquery.easyui.min.js"></script>
	<script>
		$(function(){
			$('#test').datagrid({
				title:'TestDataGrid',//列表名
				iconCls:'icon-save',
				width:600,
				height:350,
				nowrap: false,
				striped: true,
				collapsible:true,
				url:'datagrid_data.json', //所连的Action名
				sortName: 'code',
				sortOrder: 'desc',
				remoteSort: false,
				idField:'code',
				frozenColumns:[[
	                {field:'ck',checkbox:true},
	                {title:'序列',field:'code',width:80,sortable:true}
				]],
				columns:[[
			        {title:'内容',colspan:3},
					{field:'opt',title:'操作',width:100,align:'center', rowspan:2,
						formatter:function(value,rec){
							return '<span style="color:red">编辑 删除e</span>';
						}
					}
				],[
					{field:'writer',title:'姓名',width:120},
					{field:'addr',title:'住址',width:120,rowspan:2,sortable:true,
						sorter:function(a,b){
							return (a>b?1:-1);
						}
					},
					{field:'content',title:'说说',width:150,rowspan:2}
				]],
				pagination:true,
				rownumbers:true,
				toolbar:[{
            text: '输入框1<input type="text" id="userAccount"/>输入框2<input type="text" id="identityNum"/>'
        }, {
            text: '输入框3<input type="text" id="username"/>'
        }, {
            id: 'btnAddPeopleSetId',
            text: '这是toolbar输入框',
            iconCls: 'icon-add',
            handler: function(){
                inputToobar();
            }
        }]
			});
			var p = $('#test').datagrid('getPager');
			if (p){
				$(p).pagination({
					onBeforeRefresh:function(){
						alert('before refresh');
					}
				});
			}
		});
	
	</script>
</head>
<body>
	<h1>DataGrid</h1>	
	<table id="test"></table>
	
</body>
</html>

李钊2442630393

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
在datagrid中的toolbar添加输入框

如何在jQuery easyui datagrid中添加输入框，只需要在toolbar中添加如下 jQuery EasyUI $(function(){ $('#test').datagrid({ title:'TestDataGrid',//列表名 iconCls:'icon-save', width:600, hei
复制链接

扫一扫

专栏目录