<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. Winform知识

    文档界面 分类: 1.单文档界面应用程序(SDI) 特点: 1.应用程序中SDI的所有窗体都彼此独立 2.多文档界面应用程序(MDI) 特点: 1.每个应用程序中只能有一个MDI父窗体,在父窗体中可以 ...

  2. Wireless Network

    Wireless Network Time Limit: 10000MS Memory Limit: 65536K Total Submissions: 19626 Accepted: 8234 De ...

  3. 【算法题目】包含min函数的栈

    题目来源:<剑指offer>面试题21 题目:定义栈的数据结构,请在该类型中实现一个能够得到栈的最小元素的min函数.在该栈中,调用min,push以及pop的时间复杂度都是O(1). 分 ...

  4. Uva 1599 最佳路径

    题目链接:https://uva.onlinejudge.org/external/15/1599.pdf 题意: 保证在最短路的时候,输出字典序最小的路径. 方法: 路径上有了权值,可以利用图论的数 ...

  5. ReentrantLock的原理学习

    转载:https://my.oschina.net/andylucc/blog/651982 摘要 提到JAVA加锁,我们通常会想到synchronized关键字或者是Java Concurrent ...

  6. win7下如何安装JDK

    第一步:点击下载好的JDK安装程序,百度一下,网上很多,然后弹出如下界面,点击“下一步”即可. 2 第二步:此时比较关键,设置安装的路径,可以事先建立一个文件夹,以在D盘为例,如D:\java. 3 ...

  7. SqlSever基础 lower函数 返回字符串的小写形式

    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...

  8. oracle数据库导入导出dmp文件oracle命令

    在控制台下导入imp scott/密码@orcl file=文件路径 full=Y 导出 整个数据库TEST 用户名system  密码1234 exp system/1234@TEST file=文 ...

  9. 【leetcode❤python】141. Linked List Cycle

    #-*- coding: UTF-8 -*- #Method:快慢指针法,建立虚表头,快指针走两步,慢指针走一步,若存在环,则快指针会追上慢指针# Definition for singly-link ...

  10. oracle, create table, insufficient privileges

    SQL> exec pro_gz_day_report;          ORA-01031: insufficient privileges          ORA-06512: at & ...