<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Row Border in DataGrid - jQuery EasyUI Demo</title>

    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">

    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">

    <link rel="stylesheet" type="text/css" href="../demo.css">

    <script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>

    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>

</head>

<body>

    <h2>Row Border in DataGrid</h2>

    <div class="demo-info">

        <div class="demo-tip icon-tip"></div>

        <div>This sample shows how to change the row border style of datagrid.</div>

    </div>

    <div style="margin:10px 0;">

        <span>Border:</span>

        <select onchange="changeBorder(this.value)">

            <option value="lines-both">Both</option>

            <option value="lines-no">No Border</option>

            <option value="lines-right">Right Border</option>

            <option value="lines-bottom">Bottom Border</option>

        </select>

        <span>Striped:</span>

        <input type="checkbox" onclick="$('#dg').datagrid({striped:$(this).is(':checked')})">

    </div>

    <table id="dg" class="easyui-datagrid" title="Row Border in DataGrid" style="width:700px;height:250px"

            data-options="singleSelect:true,fitColumns:true,url:'../datagrid/datagrid_data1.json'">

        <thead>

            <tr>

                <th data-options="field:'itemid',width:80">Item ID</th>

                <th data-options="field:'productid',width:100">Product</th>

                <th data-options="field:'listprice',width:80,align:'right'">List Price</th>

                <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>

                <th data-options="field:'attr1',width:250">Attribute</th>

                <th data-options="field:'status',width:60,align:'center'">Status</th>

            </tr>

        </thead>

    </table>

    <script type="text/javascript">

        function changeBorder(cls){

            $('#dg').datagrid('getPanel').removeClass('lines-both lines-no lines-right lines-bottom').addClass(cls);

        }

    </script>

    <style type="text/css">

        .lines-both .datagrid-body td{

        }

        .lines-no .datagrid-body td{

            border-right:1px dotted transparent;

            border-bottom:1px dotted transparent;

        }

        .lines-right .datagrid-body td{

            border-bottom:1px dotted transparent;

        }

        .lines-bottom .datagrid-body td{

            border-right:1px dotted transparent;

        }

    </style>

</body>

</html>

 striped　　　　在默认css下没有效果，可能是css设置问题

Row Border in DataGrid 表格边框的更多相关文章

  1. EasyUI datagrid border处理，加边框，去边框，都能够

    以下是EasyUI 官网上处理datagrid border的demo: 主要是这句: $('#dg').datagrid('getPanel').removeClass('lines-both li ...

  2. EasyUI datagrid border处理，加边框，去边框，都可以，easyuidatagrid

    下面是EasyUI 官网上处理datagrid border的demo: 主要是这句: $('#dg').datagrid('getPanel').removeClass('lines-both li ...

  3. [转]CSS如何设置html table表格边框样式

    原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对tabl ...

  4. 如何用easyui+JAVA 实现动态拼凑datagrid表格(续)

    前面一段时间写了一篇文章: 如何用easyui+JAVA 实现动态拼凑datagrid表格 这篇文章的话,效果是可以实现,但是经过我反复试验,还是存在一些问题的. 今天这篇文章就是向大家介绍下如何避免 ...

  5. JavaScript变换表格边框颜色

    效果查看:http://hovertree.com/texiao/js/2.htm 代码如下,保存到HTML文件也可以查看效果: <html> <head> <meta ...

  6. HTML表格边框的设置小技巧

    对于很多初学HTML的人来说,表格<table>是最常用的标签了,但对于表格边框的控制,很多初学者却不甚其解. 对于很多初学HTML的人来说,表格<table>是最常用的标签了 ...

  7. (转)HTML表格边框的设置小技巧

    对于很多初学HTML的人来说,表格<table>是最常用的标签了,但对于表格边框的控制,很多初学者却不甚其解. 对于很多初学HTML的人来说,表格<table>是最常用的标签了 ...

  8. HTML表格边框的设置小技巧-表格

    对于很多初学HTML的人来说,表格<table>是最常用的标签了,但对于表格边框的控制,很多初学者却不甚其解. 一般我们用表格的时候总会给它个border属性,比如:<table b ...

  9. ueditor表格边框没有颜色的解决

    问题: 用ueditor画表格,会发现表格存在,但是表格边框没有颜色. 解决方法: 需要对js文件中的样式进行修改,这里我引用的编辑器样式文件是ueditor.all.min.js,所以先找到该文件, ...

随机推荐

  1. Android Intent个人介绍

    在Android中要打开一个新的Activity, 不用说,肯定会用到Intent,Intent作为Android的四大组件之一,个人理解,Intent的作用就是用来在(其它三个不同组件)间进行通讯, ...

  2. Flash上传文件(结合asp.net)

    一.实现原理.在某些场合,我们需要使用Flash进行“文件上传”,原因是Flash 能制作出表现力丰富的UI界面. (自负又孤陋寡闻的我在这里做一个补充:Flash使用flash.net包中的File ...

  3. Android开发之火星坐标转换工具

    代码: import java.io.InputStream; import java.io.ObjectInputStream; /* * 把获取到的真实地址转换为火星坐标 */ public cl ...

  4. Android Studio设备背景色

    从eclipse转到Android Studio. Android Studio的一些设置 1.设置字体大小:Settings->Editor->Colors&Fonts-> ...

  5. eclipse运行emulator时，PANIC:Could not open emulator的解决办法

    使用eclipse启动emulator的时候,出现PANIC:Could not open emulator,模拟器无法正常的运行. 经过搜索得知,因为我的SDK的环境变量出问题,需要重新配置下环境变 ...

  6. Ogre内存池的使用和说明

    大家可能会遇到一些Ogre中的内存分配的方面问题,我对这个总结了一下内存分配的方面资料. Ogre在1.7版本后,统一了内存分配策略,提供了内存是否泄漏的跟踪和内存池等比较方便开发的一些策略,目前提供 ...

  7. MemSQL Start[c]UP 2.0 - Round 1 B. 4-point polyline （线段的 枚举）

    昨天cf做的不好,居然挂零了,还是1点开始的呢.,,, a题少了一个条件,没判断长度. 写一下B题吧 题目链接 题意: 给出(n, m),可以得到一个矩形 让你依次连接矩形内的4个点使它们的长度和最长 ...

  8. 数据库编程与C#编程互译

    今天有一段代码,先是用程序实现. 闲来无聊,又用存储过程实现了一次. 程序中实现. /// <summary> /// 根据区域和用户名获取可访问的国家 /// </summary& ...

  9. UrlRewriter.dll伪静态实现二级域名泛解析

    大家应该知道,微软的URLRewrite能够对URL进行重写,但是也只能对域名之后的部分进行重写,而不能对域名进行重写, 如:可将 http://http://www.115sou.com/qq/  ...

  10. buildroot linux filesystem 初探

    /****************************************************************************** * buildroot linux fi ...