<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. 利用反射及jdbc元数据实现通用的查询方法

    ---------------------------------------------------------------------------------------------------- ...

  2. Conditional - 编译屏蔽特性

    public class Test : MonoBehaviour { void Start() { Func(); } [System.Diagnostics.Conditional("U ...

  3. C#字符串题目

    老师给小学生门布置了一些作业,让它们按照一个模版写一些字符串交上来,同学们把作业交上来了,问题来了,这么多的作业老师批改不过来,现在请你帮老师写一个程序,帮助老师确定各个字符串是否合格.首先老师有一个 ...

  4. 项目文件中含有两个config文件，app.config与app1.config，如何获取app1.config中的配置

    想要通过配置文件配置C#前台画面,好奇做了以下测试:在项目中新建了app.config与app1.config两个配置文件,请教一下各位高手如果想从app1.config中读取配置信息应该如何读取?采 ...

  5. spoj LCMSUM sigma(lcm(i,n));

    Problem code: LCMSUM Given n, calculate the sum LCM(1,n) + LCM(2,n) + .. + LCM(n,n), where LCM(i,n) ...

  6. Codeforces Round #373 (Div. 2) A

    Description Every summer Vitya comes to visit his grandmother in the countryside. This summer, he go ...

  7. php获取本周和上周的开始日期和结束日期

    <?php header('Content-type: text/html; charset=utf-8'); $date=date('Y-m-d'); //当前日期 $first=1; //$ ...

  8. white的配置使用

    初次使用White来自动化测试10个9相加1.新建Visual C#->测试->单元测试项目2.在资源视图->引用,右键,添加引用,添加White的两个.dll文件3.在工程中添加命 ...

  9. UVA 10163 十六 Storage Keepers

    十六 Storage Keepers Time Limit:3000MS     Memory Limit:0KB     64bit IO Format:%lld & %llu Submit ...

  10. [转]Unity 延迟执行一段代码的较为优雅的方式

    Unity中,延时执行一段代码或者一个方法或者几个方法的情况非常普遍. 一般会用到Invoke和InvokeRepeating方法.顾名思义,第一个是执行一次,第二个是重复执行. 看下定义: void ...