以下是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. (8)C#字符串

    一.字符串 为什么说string是一个不可变的字符序列. string a="me"; a="meeeee"; string b="me" ...

  2. 反射main方法

    利用Java反射机制去调用其他类的main方法基于这种情形: 当程序中的某个类在运行到某处需要去调用其他类的main方法时,如果此程序并不知道此main方法所属类的名称,而只是在程序中接受某一代表此m ...

  3. Python的程序结构[5] -> 模块/Module[0] -> 内建模块 builtins

    builtins 内建模块 / builtins Module 在Python的模块中,有一种特殊模块,无需导入便可以使用,其中包含了许多内建函数与类. builtins 模块内容 / builtin ...

  4. Cookie和Session在Node.JS中的实践(三)

    Cookie和Session在Node.JS中的实践(三) 前面作者写的COOKIE篇.SESSION篇,算是已经比较详细的说明了两者间的区别.机制.联系了.阅读时间可能稍长,因为作者本身作图也做了不 ...

  5. 说一说ST表 讲一讲水题

    ST表 一.算法介绍 如何快速求解RMQ问题呢?暴力复杂度O(n),线段树复杂度O(n)~O(logn),要是数据规模达到10^7或者更高呢?我们需要一种可以做到O(1)查询的算法,这时就可以用到ST ...

  6. MySQL 中的 base64 函数

    1. 5.6版本及之后的版本的base64 主要就是两个mysql内部函数to_base64和from_base64,使用也很简单,如下: 5.6之前不支持 mysql> select vers ...

  7. Mycat查询时出现:Error Code: 1064. can't find any valid datanode

    说明:这个错误是查询时条件字段超过了范围导致的. 解释: 为什么会出现范围问题? 一般在MySQL查询时不会因为字段的值超过了范围而导致的,但是在Mycat中却不是这样认为的,Mycat是由于采用的分 ...

  8. MySQL 5.7.17 Group Replication 初始

    http://blog.csdn.net/mchdba/article/details/53957248

  9. linux之openssh协议

    SSH的全称是Secure Shell,简单说来ssh是一种安全的外壳协议,用于两个计算机间安全的远程登陆,说它安全,是因为ssh采用公钥加密的机制.最开始时用作远程管理的工具是telnet,这个协议 ...

  10. 【Linux】CentOS7上rpm命令批量卸载删除模糊rpm包名

    例如,我要删除如下文件名匹配上wine的所有文件