easyui datagrid 获得焦点问题

风一样的大叔 2012-05-22 05:05:37

<!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>Editable DataGrid - jQuery EasyUI Demo</title>

	<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">

	<link rel="stylesheet" type="text/css" href="../themes/icon.css">

	<link rel="stylesheet" type="text/css" href="demo.css">

	<script type="text/javascript" src="../jquery-1.6.min.js"></script>

	<script type="text/javascript" src="../jquery.easyui.min.js"></script>

	<script>

		var products = [

		    {productid:'FI-SW-01',name:'Koi'},

		    {productid:'K9-DL-01',name:'Dalmation'},

		    {productid:'RP-SN-01',name:'Rattlesnake'},

		    {productid:'RP-LI-02',name:'Iguana'},

		    {productid:'FL-DSH-01',name:'Manx'},

		    {productid:'FL-DLH-02',name:'Persian'},

		    {productid:'AV-CB-01',name:'Amazon Parrot'}

		];

		function productFormatter(value){

			for(var i=0; i<products.length; i++){

				if (products[i].productid == value) return products[i].name;

			}

			return value;

		}

		$(function(){

			var lastIndex;

			$('#tt').datagrid({

				toolbar:[{

					text:'append',

					iconCls:'icon-add',

					handler:function(){

					$('#tt').datagrid('endEdit', lastIndex);

						$('#tt').datagrid('appendRow',{

							itemid:'',

							productid:'',

							listprice:'',

							unitprice:'',

							attr1:'',

							status:'P'

						});

						var lastIndex = $('#tt').datagrid('getRows').length-1;

						$('#tt').datagrid('selectRow', lastIndex);

						$('#tt').datagrid('beginEdit', lastIndex);

					}

				},'-',{

					text:'delete',

					iconCls:'icon-remove',

					handler:function(){

						var row = $('#tt').datagrid('getSelected');

						if (row){

							var index = $('#tt').datagrid('getRowIndex', row);

							$('#tt').datagrid('deleteRow', index);

						}

					}

				},'-',{

					text:'accept',

					iconCls:'icon-save',

					handler:function(){

						$('#tt').datagrid('acceptChanges');

					}

				},'-',{

					text:'reject',

					iconCls:'icon-undo',

					handler:function(){

						$('#tt').datagrid('rejectChanges');

					}

				},'-',{

					text:'GetChanges',

					iconCls:'icon-search',

					handler:function(){

						var rows = $('#tt').datagrid('getChanges');

						alert('changed rows: ' + rows.length + ' lines');

					}

				}],

				onBeforeLoad:function(){

					$(this).datagrid('rejectChanges');

				},

				onClickRow:function(rowIndex){

					if (lastIndex != rowIndex){

						$('#tt').datagrid('endEdit', lastIndex);

						$('#tt').datagrid('beginEdit', rowIndex);

					}

					lastIndex = rowIndex;

				}

			});

		});

	</script>

</head>

<body>

	<h2>Editable DataGrid</h2>

	<div class="demo-info" style="margin-bottom:10px">

		<div class="demo-tip icon-tip"></div>

		<div>Click the row to start editing.</div>

	</div>

	

	<table id="tt" style="width:700px;height:auto"

			title="Editable DataGrid" iconCls="icon-edit" singleSelect="true"

			idField="itemid" url="datagrid_data2.json">

		<thead>

			<tr>

				<th field="itemid" width="80">Item ID</th>

				<th field="productid" width="100" formatter="productFormatter" editor="{type:'combobox',options:{valueField:'productid',textField:'name',data:products,required:true}}">Product</th>

				<th field="listprice" width="80" align="right" editor="{type:'numberbox',options:{precision:1}}">List Price</th>

				<th field="unitcost" width="80" align="right" editor="numberbox">Unit Cost</th>

				<th field="attr1" width="250" editor="text">Attribute</th>

				<th field="status" width="60" align="center" editor="{type:'checkbox',options:{on:'P',off:''}}">Status</th>

			</tr>

		</thead>

	</table>

	

</body>

</html>

我想在双击某一行使此行处于可编辑状态后，当鼠标停留在Attribute列下的那个可编辑的输入框后，触发一个事件，求代码，求说明。。

[img=http://my.csdn.net/my/album/detail/1158006]图片[/img]

...全文

888 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

sdfdsfsfxxx 2014-10-31

打赏
举报

楼主，你能说明下啊？？？

引用 3 楼 qiujialongjjj 的回复:

我昨天用jQuery的选择器实现了需要的功能，不过还是谢谢你哈

楼主不能说下啊

sjbttt 2014-09-25

打赏
举报

楼主怎么解决的，请说明下。

jxncszdfdh 2014-05-21

打赏
举报

怎麼解決的,

风一样的大叔 2012-05-23

打赏
举报

我昨天用jQuery的选择器实现了需要的功能，不过还是谢谢你哈

木有GGsMd 2012-05-22

打赏
举报

这个我好像做过，你是不是要编辑一个单元格呢？在你定义datagrid的时候加下面这个事件



    onClickCell:function(rowIndex, field, value){

     if(field == 'Attribute')

          $('#tt').datagrid('beginEdit', rowIndex); //这个是关键，触发开始编辑事件

  }

你把datagrid的columns属性中你要编辑的那个列的field里增加一个editor属性,可以查看一下datagrid的api文档，希望对你有用

风一样的大叔 2012-05-22