datagrid实现单行的选择、取消

最新推荐文章于 2025-06-30 13:19:08 发布

zhao1949

最新推荐文章于 2025-06-30 13:19:08 发布

阅读量6.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/zhao1949/article/details/53378618

javascript 专栏收录该内容

19 篇文章

订阅专栏

该博客介绍了如何使用jQuery EasyUI库实现DataGrid组件中单行的选择和取消选择功能。通过提供的JavaScript函数，可以获取选中的行、所有选中的行、上移行以及显示所有行的数据。在DataGrid初始化时，通过onBeforeSelect事件监听选择行为，确保每次只能选择一行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css">
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script>
	<script>
		function getSelected(){
			var row = $('#tt').datagrid('getSelected');
			if (row){
				alert('Item ID:'+row.itemid+"\nPrice:"+row.listprice);
			}
		}
		function getSelections(){
			var ids = [];
			var rows = $('#tt').datagrid('getSelections');
			for(var i=0; i<rows.length; i++){
				ids.push(rows[i].itemid);
			}
			alert(ids.join('\n'));
		}
        
        function upRow(){
            var row = $('#tt').datagrid('getSelected');
            var rowindex = $('#tt').datagrid('getRowIndex',row);
            //alert(rowindex);
            if(rowindex === 0) {return; }
            $('#tt').datagrid('insertRow',{index:rowindex-1,row});
            $('#tt').datagrid('deleteRow',rowindex+1);
        }
        function allRows(){
            var rows = $('#tt').datagrid('getRows');
            alert(rows.length);
            for(var i=0; i<rows.length; i++){
                alert(rows[i].itemid);
            }
        }
        
        //实现选择单行，取消单行
        $(function(){
            $("#tt").datagrid({
                onBeforeSelect: function(index,row){
                    var row =$('#tt').datagrid('getSelected');
                    var curRowindex = $('#tt').datagrid('getRowIndex',row);
                    alert("当前selected row =" + curRowindex);
                    if(curRowindex != index) {return true;}
                    else{ $('#tt').datagrid('unselectRow',index); return false;}
                }
            });
        });
	</script>
</head>
<body>
	<h1>DataGrid</h1>
	<div style="margin-bottom:20px">
		<a href="#" onclick="getSelected()">GetSelected</a>
		<a href="#" onclick="getSelections()">GetSelections</a>
        <a href="#" onclick="upRow()">upRow</a>
        <a href="#" onclick="allRows()">all rows</a>
	</div>
	<table id="tt" class="easyui-datagrid" style="width:600px;height:250px"
			url="data/datagrid_data.json"
            data-options="singleSelect:true"
			title="Load Data" iconCls="icon-save" fitColumns="true">
		<thead>
			<tr>
				<th field="itemid" width="80">Item ID</th>
				<th field="productid" width="80">Product ID</th>
				<th field="listprice" width="80" align="right">List Price</th>
				<th field="unitcost" width="80" align="right">Unit Cost</th>
				<th field="attr1" width="150">Attribute</th>
				<th field="status" width="60" align="center">Stauts</th>
			</tr>
		</thead>
	</table>
</body>
</html>