以下是EasyUI 官网上处理datagrid border的demo：

主要是这句：

$('#dg').datagrid('getPanel').removeClass('lines-both lines-no lines-right lines-bottom').addClass(cls);
    <!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.min.js"></script>

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

    </head>

    <body>

    <h2>Row Border in DataGrid</h2>

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

    <div style="margin:20px 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_data1.json',method:'get'">

    <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>

当然还能够直接在datagrid定义时採用以下的方式（styler部分）：

grid = $('#grid').datagrid({

			title : '',

			url : '',

			striped : true,

			rownumbers : true,

			pagination : false,

			singleSelect : true,

			idField : 'id',

			sortOrder : 'desc',

			columns : [ [ {

				width : '100',

				title : '地址',

				field : 'address',

				sortable : true,

				styler : function(value, row, index) {

					return 'border:0;';

				}

			}]]

		});

EasyUI datagrid border处理，加边框，去边框，都能够的更多相关文章

  1. [转载]再次谈谈easyui datagrid 的数据加载

    这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数 ...

  2. 谈谈easyui datagrid 的数据加载(转)

    这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数 ...

  3. 再次谈谈easyui datagrid 的数据加载

    from:http://www.easyui.info/archives/204.html 这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实ea ...

  4. 谈谈easyui datagrid 的数据加载

    文章目录 1url方式加载数据 1.1调用方式 1.2相关方法 1.3二次加载问题 2加载本地数据方式 2.1调用方式 2.2如何分页 2.3加载中效果 2.4如何不统计总数 这篇文章只谈jQuery ...

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

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

  6. jQuery easyui datagrid 的数据加载

        其实easyuidatagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数据:另一种是加载js对象,也就是使用loadDate方法,这种方法用于加载本地js数据(非ur ...

  7. EasyUI - DataGrid 组建 - [ 组件加载和分页 ]

    效果: 原理:通过POST传递到数据后台字段. 此时上传的参数,page:当前页数,rows:每页显示的页数. 有此两项参数,计算取出数据条数. 通过后台接受参数,进行处理并返回抽取的数据. html ...

  8. 轻松搞定 easyui datagrid 二次加载的问题（转）

    对于使用url方式的初学者,经常碰到重复请求的问题,这个问题的根源是因为一旦设置了url参数,Datagrid组件在实例化的时候就会做请求,如何避免二次加载这样问题呢,个人觉得注意以下两点基本就可以防 ...

  9. easyui datagrid 的数据加载Json数据

    var obj = {'total':100,'rows':[{id:'1',name:'一'},{id:'2',name:'二'}]}; $('#tt').datagrid('loadData',o ...

随机推荐

  1. web前端到底是什么？有前途吗

    web前端到底是什么? 某货: “前几年前端开发人员鱼目混杂,技术参差不齐,相对学习起来不规范,导致> 前端开发人员聚集,所以现在前端工种和工资还是没得到普遍重视,但近2年来,> > ...

  2. 洛谷 P1739 表达式括号匹配【STL/stack/模拟】

    题目描述 假设一个表达式有英文字母(小写).运算符(+,-,*,/)和左右小(圆)括号构成,以"@"作为表达式的结束符.请编写一个程序检查表达式中的左右圆括号是否匹配,若匹配,则返 ...

  3. springmvc适配器的应用

         前言     关于SpringMVC初始化ContextLoader中的XMLWebApplicationContext,以及DispatcherServlet初始化等等,这样的原理 已经有 ...

  4. 洛谷——P1614 爱与愁的心痛

    题目背景 (本道题目隐藏了两首歌名,找找看哪~~~) <爱与愁的故事第一弹·heartache>第一章 <我为歌狂>当中伍思凯神曲<舞月光>居然没赢给萨顶顶,爱与愁 ...

  5. Topcoder 刷题之路_鶸的奋斗

    最近碰到的题不是水题就是坑题,实在没意思,听说神犇们都在Topcoder上刷SRM,于是我决定将SRM的DIV 1刷个遍.这里是目录 哎..好多转博客不注明出处的,这里给出本博客的出处:http:// ...

  6. luogu P1340 兽径管理

    题目描述 约翰农场的牛群希望能够在 N 个(1<=N<=200) 草地之间任意移动.草地的编号由 1到 N.草地之间有树林隔开.牛群希望能够选择草地间的路径,使牛群能够从任一 片草地移动到 ...

  7. 【bzoj1598】【 [Usaco2008 Mar]牛跑步】启发式搜索思路+spfa

    (上不了p站我要死了,侵权度娘背锅) 最近复习搜索,先从启发式搜索来吧. 感觉启发式搜索这玩意挺玄学的,先从其思想入手,做一道经典的K短路. Description BESSIE准备用从牛棚跑到池塘的 ...

  8. kubernetes API Server安全

    用户访问API Server(以下简称Server),K8S的安全检查步骤:认证和授权. 认证解决用户是谁的问题,就是验证用户名密码;授权解决用户能做什么的问题,就是检查该用户是否拥有权限访问请求的资 ...

  9. 网易云音乐PC客户端加密API逆向解析

    1.前言 网上已经有大量的web端接口解析的方法了,但是对客户端的接口解析基本上找不到什么资料,本文主要分析网易云音乐PC客户端的API接口交互方式. 通过内部的代理设置,使用fiddler作为代理工 ...

  10. NetBean 远程开发的好文1 --> NetBeans的远程Linux C开发实践

    from:  http://blog.csdn.net/jacktan/article/details/9268535 一直以来总觉得NetBeans生活在Eclipse的阴影下,同样做为一款不错的基 ...