<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. Finding Nemo 分类： POJ 2015-07-11 10:11 10人阅读 评论(0) 收藏

    Finding Nemo Time Limit: 2000MS   Memory Limit: 30000K Total Submissions: 8117   Accepted: 1883 Desc ...

  2. c++map的用法 分类： POJ 2015-06-19 18:36 11人阅读 评论(0) 收藏

    c++map的用法 分类: 资料 2012-11-14 21:26 10573人阅读 评论(0) 收藏 举报 最全的c++map的用法 此文是复制来的0.0 1. map最基本的构造函数: map&l ...

  3. 2013年江西理工大学C语言程序设计竞赛（高级组）

    A 解法:dfs搜索,注意一个剪枝,否则会超时(听说原本是个dp)? #include<stdio.h> //#include<bits/stdc++.h> #include& ...

  4. Myeclipse 添加server library

    来自网络资料 (1)File->New->Other (2)弹出窗口勾上Show All Wizards,然后在type fiter text那里输入Server,选中server-> ...

  5. Configuration对象

    Configuration对象 Hibernate的持久化操作离不开SessionFactory对象,使用该对象的openSession()方法可以打开Session对象.而SessionFactor ...

  6. Spring MVC 详解（一）

    springmvc是spring的一个模块,提供web层解决方案(基于mvc设计架构),mvc是一个设计模式,在b/s系统的应用: spring 的架构 mvc设计模式 spring MVC的框架 第 ...

  7. UI事件 计算器界面

    1.MainActivity.java package com.example.administrator.testapp2; import android.support.v7.app.AppCom ...

  8. iOS—最全的真机测试教程

    准备 开发者账号 自从Xcode7 出来之后,一般的真机测试不需要开发者账号,也就不需要看这篇教程,只有app具有“推送”等功能的时候,要真机测试就必须要开发者账号和设置证书.苹果只是让你体验一下它的 ...

  9. @JoinColumn

    @OneToOne注释只能确定实体与实体的关系是一对一的关系,不能指定数据库表中的保存的关联字段.所以此时要结合@JoinColumn标记来指定保存实体关系的配置. @JoinColumn与本书上一章 ...

  10. Zookeeper未授权访问

    l 漏洞名称: zookeeper未授权访问 l  漏洞影响版本: zookeeper l  漏洞细节: ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubb ...