<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>

datagrid实现单行的选择、取消的更多相关文章

  1. easyui datagrid单击单元格选择此列

    示例代码实现单击jquery easyui datagrid的单元格时,取消datagrid默认选中高亮此行的样式,改为选中单击的单元格所在的列,高亮此列上的所有单元格.可以配置全局single变量, ...

  2. Easyui datagrid combobox输入框下拉(取消)选值和编辑已选值处理

    datagrid combobox输入框下拉(取消)选值和编辑已选值处理 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3   需求场景 如下,在datagri ...

  3. EasyUI DataGrid 实现单行/多行编辑功能

    要实现 EasyUI DataGrid 的可编辑很简单,在需要编辑的列添加 editor [编辑器]就可以了. 单行编辑 // 初始化数据列表 function initDatagrid() { $( ...

  4. jquery easyui datagrid实现单行的上移下移，以及保存移动的结果

    1.实现行的上移.下移. 说明: 1.1 通过datagrid生成的表格有固定的格式,比如,表格div的class名是datagrid-view.比如每一行tr都有id和datagrid-row-in ...

  5. easyui datagrid种编辑器combobox选择的值不显示解决方案

    var combobox_json = [{ "combobox_value" : "GDLB01", "combobox_name" : ...

  6. easyui datagrid 实现单选并能取消单选

    var intjavadillcheck=0; var rowjavadillselect=null; function ghm_getPageListCallback(result){ if(res ...

  7. datagrid在MVC中的运用03-选择单行或多行

    本文体验datagrid显示单行或多行内容.分别用到了datagrid的getSelected,getSelections方法. Html部分 <a href="#" cla ...

  8. jQuery EasyUI教程之datagrid应用-2

    二.DataGrid的扩展应用 上一份教程我们创建的一个CRUD应用是使用对话框组件来增加或编辑用户信息.本教程将教你如何创建一个CRUD 数据表格(datagrid). 为了让这些CRUD功能正常工 ...

  9. jQuery EasyUI教程之datagrid应用

    一.利用jQuery EasyUI的DataGrid创建CRUD应用 对网页应用程序来说,正确采集和管理数据通常很有必要,DataGrid的CRUD功能允许我们创建页面来列表显示和编辑数据库记录.本教 ...

随机推荐

  1. 链接注入（便于跨站请求伪造）（AppScan扫描结果）

    最近工作要求解决下web的项目的漏洞问题,扫描漏洞是用的AppScan工具,其中此篇文章是关于链接注入问题的.下面就把这块东西分享出来. 原创文章,转载请注明 -------------------- ...

  2. poj2482 Stars in Your Window

    此题可用线段树或静态二叉树来做. 考虑用线段树: 很容易想到先限定矩形横轴范围再考虑在此纵轴上矩形内物品总价值的最大值. 那么枚举矩形横轴的复杂度是O(n)的,考虑如何快速获取纵轴上的最大值. 我们不 ...

  3. Tautology 分类： POJ 2015-06-28 18:40 10人阅读 评论(0) 收藏

    Tautology Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 10428   Accepted: 3959 Descri ...

  4. 如何生成excel文件作为图像识别结果

    如何生成excel文件作为图像识别结果 在进行大规模图像处理的时候,如果能够以表格的形式生成结果文件,将非常的直观.这个时候,选择excel作为结果输出文件,将是合适的. 查询相关资料,有很多关于ex ...

  5. MySQL bin-log 日志清理方式

    MySQL bin-log 作用   1.数据恢复:如果你的数据库出问题了,而你之前有过备份,那么可以看日志文件,找出是哪个命令导致你的数据库出问题了,想办法挽回损失. 2.主从服务器之间同步数据:主 ...

  6. CF 113C

    求区间 [l,r]   满足 素数 = a^2+b^2    a b为任意整数 打素数表,如何证明  此时的素数满足 %4==1 #include<iostream> #include&l ...

  7. Android中直播视频技术探究之---采集摄像头Camera视频源数据进行推流(采用金山云SDK)

    一.前言 在之前已经详细介绍了Android中的一种视频数据源:Camera,不了解的同学可以点击进入:Android中Camera使用详解 ,在这篇文章中我们介绍了如何采集摄像头的每一帧数据,然后进 ...

  8. await和async关键字来写异步程序

    await和async关键字出现于.Net5.0,方便写异步程序. 例子: public class MyClass { public MyClass() { DisplayValue(); //这里 ...

  9. 2016年12月13日 星期二 --出埃及记 Exodus 21:8

    2016年12月13日 星期二 --出埃及记 Exodus 21:8 If she does not please the master who has selected her for himsel ...

  10. ContentProvider官方教程(3)ContentResolver查询、遍历 示例

    Retrieving Data from the Provider This section describes how to retrieve data from a provider, using ...