下面是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处理,加边框,去边框,都可以,easyuidatagrid的更多相关文章

  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处理,加边框,去边框,都能够

    以下是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. 当网络中断的时候,JTA全局事务管理,究竟会不会回滚???

    前言:有人问了我一个问题,就是说在网络中断的时候,JTA的全局事务管理,会不会回滚?当时说会回滚,但没给对方说清楚理由,也不太认同我的观点.现在总结一下. 今天一天都在看文档(也查了一些博客和网站), ...

  2. Android内存使用——垃圾回收LOG,GC_CONCURRENT等的意义的说明

    在调试程序的时候,经常发现GC_CONCURRENT之类的打印.在网上搜了一下,感觉说法各式各样.最后,在Google的官方网站上发现了详细介绍. Every time a garbage colle ...

  3. pip安装 Tensorflow 安装包

    最简单的 Tensorflow 的安装方法是在 pip 一键式安装官方预编译好的包 pip install tensorflow通常这种预编译的包的编译参数选择是为了最大兼容性而不是为了最优性能,导致 ...

  4. 升级springboot 2.x 踩过的坑——跨域导致session问题

    目前IT界主流前后端分离,但是在分离过程中一定会存在跨域的问题. 什么是跨域? 是指浏览器从一个域名的网页去请求另一个域名的资源时,域名.端口.协议任一不同,都是跨域. 做过web后台的童鞋都知道,跨 ...

  5. hdu 3685 多边形重心+凸包

    Rotational Painting Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...

  6. 博彩游戏(tyvj 1519)

    背景 Bob最近迷上了一个博彩游戏…… 描述 这个游戏的规则是这样的:每花一块钱可以得到一个随机数R,花上N块钱就可以得到一个随机序列:有M个序列,如果某个序列是产生的随机序列的子串,那么就中奖了,否 ...

  7. Windows PowerShell Exit Codes

    Windows PowerShell Exit Codes PSMDTAG:FAQ: How can my script control the PowerShell exit code? Answe ...

  8. linux 调试常用命令

    top 参数 1 ,查看多核cpu  也可用 mpstat -P ALL pstate PID 查看进程堆栈 pmap -x PID 查看进程 内存段 ldd  XXX.so 查看 .so 的link ...

  9. Mac 下安装Ant

    转自:http://blog.csdn.net/crazybigfish/article/details/18215439 如果你不知道什么是ant,请不要浪费你的时间继续读下去了.或者你对ant是什 ...

  10. Struts学习总结(一)

    1,需要包下载地址: http://archive.apache.org/dist/struts/binaries/ 2.报错:org/apache/commons/lang3/StringUtils ...