<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. Java中通过Selenium WebDriver定位iframe中的元素

    转载请注明出自天外归云的博客园:http://www.cnblogs.com/LanTianYou/ 问题:有一些元素,无论是通过id或是xpath等等,怎么都定位不到. 分析:这很可能是因为你要定位 ...

  2. jquery的ajax向ashx传值，中文乱码问题

    从网上查找了很多资料: 有在配置文件里面加如下配置 <globalization responseEncoding="utf-8" requestEncoding=" ...

  3. hdu 2089 不要62 数位dp

    不要62 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  4. Android中直播视频技术探究之---摄像头Camera视频源数据采集解析

    一.前言 在视频直播中一般都是两种视频数据源,一个是摄像头数据,一个是录制桌面数据,而一般来说美女妹子直播都是来自于摄像头数据,游戏直播都是录制桌面数据的,那么今天就来看看第一个数据源数据采集分析,A ...

  5. 解决json_encode中文UNICODE转码问题

    用PHP的json_encode来处理中文的时候, 中文都会被编码, 变成不可读的, 类似”\u***”的格式,如果想汉字不进行转码,这里提供三种方法 .升级PHP,在PHP5., 这个问题终于得以解 ...

  6. ［转］NSTimer和CADisplayLink的基本用法

    简要区别:NSTimer初始化器接受调用方法逻辑之间的间隔作为它的其中一个参数,预设一秒执行30次.CADisplayLink默认每秒运行60次,通过它的frameInterval属性改变每秒运行帧数 ...

  7. C#For循环

    for循环基本格式 for(初始条件;循环条件;状态改变) { 循环体 } 1.小明单位发了100元的购物卡,小明到超市买三类洗化用品,洗发水(15元),香皂(2元),牙刷(5元).要把100元整好花 ...

  8. Spring 框架 详解 （三）-----IOC装配Bean

    IOC装配Bean: 1.1.1 Spring框架Bean实例化的方式: 提供了三种方式实例化Bean. * 构造方法实例化:(默认无参数) * 静态工厂实例化: * 实例工厂实例化: 无参数构造方法 ...

  9. 【转载】为什么CPU有多层缓存

    原文:为什么CPU有多层缓存 http://mp.weixin.qq.com/s?__biz=MzI1NDM2Nzg5Mw==&mid=2247483712&idx=1&sn= ...

  10. eclipse下添加viplugin插件的方法

    http://www.viplugin.com/ 在eclipse根目录下建立文件:viplugin2.lic,然后在里面添加以下字符串: nd4UFjUMBADcUSeSW8ocLKoGP3lpbW ...