EasyUI datagrid border处理,加边框,去边框,都能够

以下是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;‘;
				}
			}]]
		});
时间: 2024-10-27 23:23:34

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

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

这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数据:另一种是加载js对象,也就是使用loadDate方法. 这里就自己的使用经验,对两种方式做简单总结和归纳,并且对使用过程中容易产生的误区做较为详细的描述,希望能对大家有所帮助. url方式加载数据 调用方式 目前可能大多数人都是选择这种方式,因为跟流行的框架结合的也比较好,使用url的话,可以将

谈谈easyui datagrid 的数据加载

文章目录 1url方式加载数据 1.1调用方式 1.2相关方法 1.3二次加载问题 2加载本地数据方式 2.1调用方式 2.2如何分页 2.3加载中效果 2.4如何不统计总数 这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数据:另一种是加载js对象,也就是使用loadDate方法. 这里就自己的使用经验,对两种方式做简单总结和归纳,并且对使用过程

EasyUI datagrid border处理,加边框,去边框,都可以,easyuidatagrid

下面是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 Bo

EasyUI datagrid border处理,加边框,去边框,都可以

下面是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 Bo

【颗粒归仓】(一)jQuery easyui datagrid 的数据加载

其实easyuidatagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数据:另一种是加载js对象,也就是使用loadDate方法,这种方法用于加载本地js数据(非url调用).在项目中我用到的以及研究别人代码中用到的普遍是第一种,下面就分别对他们进行总结. 一.ajax加载目标url返回的json数据 首先明确,通过ajax加载目标url返回的值不一定是json格式,在http://blog.csdn.net/luckystar689/article/details/5

EasyUI - DataGrid 组建 - [ 组件加载和排序 ]

效果: 原理:通过POST传递到数据后台字段. 此时上传的参数,page:当前页数,rows:每页显示的页数. 有此两项参数,计算取出数据条数. 通过后台接受参数,进行处理并返回抽取的数据. html代码: <table id="tab"></table> JS代码: 此时显示的列名称,对应的是JSON数据中的列名称. $(function () { $('#tab').datagrid({ width: 500,//宽度 title: '信息列表',//标题名

easyui datagrid 内容无法加载的问题

先看代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="gb2312"/> <title>增加,删除行</title> <link rel="stylesheet" type="text/css" href="../easyui-ku/themes/default/easyui

【EasyUi DataGrid】动态加载列

动态加载列可以说是一个从无到有的过程,如果只是网页上的DataGrid实现那就太无味了,有趣的在这里,这个页面上连带着一大堆的数据库表的查询修改,尤其是做着做着发现数据表设计有缺陷,需要的数据竟然只有出口没有入口,想想也是醉了,对业务不熟悉真心的杀不起啊.这个其实蛮好玩的,就像玩捉迷藏藏得那个人叫做nothing,再后来我又遇到了Multiple-births(多胞胎),一个页面上涉及到了六七张数据库表,里边的字段名虽然不一样,可它就是达到了百分之七八十的相似度,多亏咱是上过学的,欺负不了我读书

easyui datagrid 的数据加载Json数据

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