当前位置: 代码迷 >> Web前端 >> 在datagrid中的toolbar增添输入框
  详细解决方案

在datagrid中的toolbar增添输入框

热度:293   发布时间:2012-10-16 09:57:37.0
在datagrid中的toolbar添加输入框
如何在jQuery 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>
1 楼 火大了 2011-09-08  
2 楼 ynnuyili 2012-09-18  

  相关解决方案