如图，用jquery easyui datagrid显示数据的，怎么让这两列标题隐藏。_教程

你好！！

这个通过配置无法解决，只能手工干预啦~~

下面代码可供参考：

javascript：

$(function(){

$('#tt').datagrid({

onLoadSuccess:function(data){

//获取表头第3列的div

var _div = $(".datagrid-header-row td:eq(3) div")

// *** 作表头第4列对象，将宽度调宽，追加第3列的div，设置居中及文本

$(".datagrid-header-row td:eq(4)")

.css("width",160)

.append(_div)

.attr("align","center")

.text("收油计划日期")

//设置表头第3列对象宽度为0

$(".datagrid-header-row td:eq(3)").css("width",0)

_div = null

}

})

</script>

html:

<table id="tt" class="easyui-datagrid" title="Column Group" style="width:700pxheight:250px"

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

<thead>

<tr>

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

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

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

</tr>

</thead>

</table>

代码很容易读懂·····

希望对你有帮助！！！！

如我们需要兼容不同屏幕分辨率、清晰度以及屏幕定向方式竖屏(portrait)、横屏(landscape)，怎样才能做到让一种设计方案满足所有情况？对此，马海祥觉的我们的布局应该是一种d性的栅格布局，不同尺寸下d性适应，如以下页面中各模块在不同尺寸下的位置：

那么我们具体要怎么做呢？

1、Meta标签定义

使用 viewport meta 标签在手机浏览器上控制布局

通过快捷方式打开时全屏显示

隐藏状态栏

iPhone会将看起来像电话号码的数字添加电话连接，应当关闭

2、使用Media Queries适配对应样式

常用于布局的CSS Media Queries有以下几种：

设备类型(media type):

all所有设备；

screen 电脑显示器；

print打印用纸或打印预览视图；

handheld便携设备；

tv电视机类型的设备；

speech语意和音频盒成器；

braille盲人用点字法触觉回馈设备；

embossed盲文打印机；

projection各种投影设备；

tty使用固定密度字母栅格的媒介，比如电传打字机和终端。

设备特性(media feature):

width浏览器宽度；

height浏览器高度；

device-width设备屏幕分辨率的宽度值；

device-height设备屏幕分辨率的高度值；

orientation浏览器窗口的方向纵向还是横向，当窗口的高度值大于等于宽度时该特性值为portrait，否则为landscape；

aspect-ratio比例值，浏览器的纵横比；

device-aspect-ratio比例值，屏幕的纵横比。

例子：

/* for 240 px width screen */

@media only screen and (max-device-width:240px){

selector{ ... }

}

/* for 320px width screen */

@media only screen and (min-device-width:241px) and (max-device-width:320px){

selector{ ... }

}

/* for 480 px width screen */

@media only screen (min-device-width:321px)and (max-device-width:480px){

selector{ ... }

}

适用于布局的Media Queries，这里在马海祥博客上我们就不再做详述，有兴趣的话，可通过官方文档进一步了解。

3、表格(table)的响应式处理

那么对于表格(table)的响应式处理该是怎样的呢？我们该如何突破Table的局限性呢？接下来我们来了解以下的几种针对表格响应式处理的方法：

（1）、隐藏不重要数据列

处理前：

（点击查看大图）

处理后：

实现方法代码：

@media only screen and (max-width: 800px) {

table td:nth-child(2),

table th:nth-child(2) {display: none}

}

@media only screen and (max-width: 640px) {

table td:nth-child(4),

table th:nth-child(4),

table td:nth-child(7),

table th:nth-child(7),

table td:nth-child(8),

th:nth-child(8){display: none}

}

以用户角度思考，每个人对数据的认知不同，或许你隐藏的数据对于他却是很重要的，所以对于这种方法马海祥并不推荐。

（2）、多列横向变2列纵向

处理前：

处理后：

实现方法：<thead>定位隐藏，<td>变块元素，并绑定对应<th>列名，然后用伪元素的content:attr(data-th)实现<th>：

（3）、固定首列，剩余列横向滚动

处理前：

处理后：

实现原理代码：

thead {float:left}

tbody {display:blockwidth:autooverflow-x:auto}

二、响应式内容

1、响应式图片

带宽是手机终端的硬伤，如果我们只是页面布局做了响应式处理，在我们用手机访问时，请求的图片还是PC上的大图；文件体积大，消耗流量多，请求延时长，因此导致的问题也是不可估量的。那么我们就得把图片也处理成响应式的根据终端类型尺寸分辨率来适配出合理的图形。

处理原理：浏览器获取用户终端的屏幕尺寸、分辨率逻辑处理后输出适应的图片，如屏幕分辨率320*480，那么我们匹配给它的是宽度应小于320px的图片。如果终端屏幕的DPI(device pixels)DPI详解值很高，也就是高清屏，那么我们就得输出2倍分辨率的图形(宽:640px)；以保证在高清屏下图形的清晰度。各种移动终端的屏幕参数可通过http://screensiz.es/phone查询。

解决方案：其实W3C已经有一个用于响应式图形的草案：新定义标签<picture>，因为它还只是草案，目前还没有支持的浏览器，期待在不久的未来我们能用上。虽然目前不支持，但我们还是来了解下，为之后的内容做个铺垫。

<picture>是一个图形element，内容由多个源图组成，并由CSS Media Queries来适配出合理图形，代码规范如下：

　<p>Accessible text</p>

　</noscript>

</picture>

注：source: 一个图片源；

media: 媒体查询，用于适配屏幕尺寸；

srcset: 图片链接，1x适应普通屏，2x适应高清屏；

<img/>: 初始图片；另外还有一个无障碍文本，类似<img/>的alt属性。

虽然<picture>目前还不支持，但它的原理我们是可借鉴的，所以就诞生了一个用于图片响应式处理的类库Picturefill

　</noscript>

</span>

其原理就是JS获取Source的源以及CSS Media Queries规则，输出适应图片，逻辑细节这里不再解析，感兴趣的可查看其JS代码，逻辑不是很复杂，也可以自己封装一个类库，以适用于自身产品，例如图片加载失败的替代方案。

当然，在未来的CSS Image Level 4中已经实现了响应式图片的原生语法：image-set

<image-set>= image-set([ <image-set-decl>, ]* [ <image-set-decl>| <color>])

<image-set-decl>= [ <image>| <string>] <resolution>

那么我们的响应式图片可以这样重写了

background-image:url(default.jpg) /* 普通幕 */

background-image: -webkit-image-set(url(medium.jpg) 1x, url(large.jpg) 2x) /* Retina高清屏 */

注：Webkit 目前只实现了 url() 形式的取值，且dppx值取负值[-2x]貌似也是合法的。

当然除此之外，还有其他的响应式处理，如服务端user-agent嗅探。

2、高分辨率(DPI)下的响应式处理

（1）、SVG：优点可承载色彩丰富、设计复杂图形，且渲染不会出现边缘不顺滑；缺点是IE的支持不完美。

（2）、Icon fonts：支持多浏览器，图形颜色大小的修改成本低，易于维护；图形表现单一，不支持色彩丰富且复杂的图形，IE6渲染有毛边。

（3）、-webkit-image-set:只支持单个图形的适配，不利于图形合并，兼容不完美（Safari 6+, Chrome 21+）。

JS检测：var retina = window.devicePixelRatio >1

CSS Media Query:

@media (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */

(min--moz-device-pixel-ratio: 2),/* Older Firefox browsers (prior to Firefox 16) */

(min-resolution: 2dppx), /* The standard way */

(min-resolution: 192dpi) /* dppx fallback */

3、高分辨率下的1px border

由于高清屏的特性，1px是由2×2个像素点来渲染，那么我们样式上的border:1px在Retina屏下会渲染成2px的边框，与设计稿有出入，为了追求1px精准还原，我们就不得不拿出一个完美的解决方案。

在Photoshop中，如果需要看似0.5px的边框，常见的方法就是对1px边框加上阴影模糊1px。同理，我们在retina屏下需要做到真实的1px边框，可利用box-shadow属性模拟。

@media only screen and (-webkit-min-device-pixel-ratio:1.5),

only screen and (min-device-pixel-ratio:1.5) {

button {

border:none

padding:0 16px

box-shadow: inset 0 0 1px #000,

inset 0 1px 0 #75c2f8,

0 1px 1px -1px rgba(0, 0, 0, .5)

}

首先，表格采用的是BootStrap样式编辑的，主要使用的是angularjs，为了方便也有jQuery的方法，在测试时需自行引入bootstrap，angularjs和jq的文件。

整体代码预览：

HTML：

<!DOCTYPE html>

<head>

//需要自行引入BOOTStrap，angularjs和jQuery的js，css文件

<style>

.pagination .num{

font-size:22pxcolor:red

}

.text{

margin:0 auto

border:1px solid #ccc

width:100%

max-width:200px

}

</style>

</head>

<div class="muted pull-left">{{kaohzbTitle}}</div>

</div>

<button style="margin-left: 5px" id="refresh" ng-click="refresh()"

class="btn btn-success">

<i class=" icon-refresh icon-white"></i>刷新

</button>

<button ng-disabled="isdisabled" class="btn" ng-class="{'btn-info':isInfo}" id="savekaohzb"

ng-click="save()">

<i class="icon-edit icon-white"></i>保存

</button>

</div>

<table class="table table-striped table-bordered table-hover"

id="example" style="margin-top:10px">

<thead>

<tr>

<th style="text-align: centerwidth: 150pxvertical-align: middle" rowspan="2">玩家支持队伍</th>

</tr>

<tr>

</tr>

</thead>

<td style="text-align:center">{{tb.zbname}}</td>

<td style="text-align:center">{{tb.zbtime}}</td>

<td style="text-align:center">{{tb.zbrul1}}</td>

<td style="text-align:center">{{tb.zbrul2}}</td>

<td style="text-align:center">{{tb.zbrul2}}</td>

<td style="text-align:center">{{tb.zbrul1}}</td>

<td style="text-align:center">{{tb.score}}</td>

<td>

</select>

</td>

</tr>

</tbody>

</table>

</div>

</ul>

</li>

</ul>

<span>

当前为第<span class="num" id="current_page"></span>页，总共<span class="num" id="page_all"></span>页

</span>

<span>您当前对select的 *** 作值为:</span>{{typename}}

</div>

</div>

</body>

js代码：

angular.module("myModule",[]).controller('myCtrl', function($scope) {

$scope.kaohzbTitle = "考核指标维护"

$scope.search = new Object()

$scope.isdisabled=false

$scope.isInfo=false

$scope.saveDate=""//用于保存得到的原始数据

// $http.post请求表格数据

// 模仿请求得到的数据

var datalist=[{

id:1,zbname:"中亚赛区比赛",zbtime:"2015-12-03",zbrul1:"胜利",zbrul2:"失败",por:"请输入说明内容",score:"2:1",type:"支持红方"},{

id:2,zbname:"日韩赛区比赛",zbtime:"2015-11-11",zbrul1:"胜利",zbrul2:"胜利",por:"请输入说明内容",score:"2:1",type:"支持蓝方"},{

id:3,zbname:"欧美赛区比赛",zbtime:"2015-3-03",zbrul1:"失败",zbrul2:"胜利",por:"请输入说明内容",score:"2:1",type:"双方相同"},{

id:4,zbname:"中东赛区比赛",zbtime:"2016-1-05",zbrul1:"胜利",zbrul2:"失败",por:"请输入说明内容",score:"2:1",type:"支持蓝方"},{

id:5,zbname:"北京赛区比赛",zbtime:"2014-12-23",zbrul1:"失败",zbrul2:"胜利",por:"请输入说明内容",score:"2:1",type:"双方相同"},{

id:6,zbname:"韩国赛区比赛",zbtime:"2015-11-01",zbrul1:"失败",zbrul2:"胜利",por:"请输入说明内容",score:"2:1",type:"双方相同"},{

id:7,zbname:"日本赛区比赛",zbtime:"2011-1-23",zbrul1:"胜利",zbrul2:"失败",por:"请输入说明内容",score:"2:1",type:"支持红方"},{

id:8,zbname:"中亚赛区比赛",zbtime:"2013-12-15",zbrul1:"失败",zbrul2:"胜利",por:"请输入说明内容",score:"2:1",type:"支持蓝方"},{

id:9,zbname:"中亚赛区比赛",zbtime:"2015-10-17",zbrul1:"失败",zbrul2:"胜利",por:"请输入说明内容",score:"2:1",type:"支持红方"},{

id:10,zbname:"中亚赛区比赛",zbtime:"2015-11-21",zbrul1:"胜利",zbrul2:"胜利",por:"请输入说明内容",score:"2:1",type:"支持蓝方"},{

id:11,zbname:"中亚赛区比赛",zbtime:"2015-2-02",zbrul1:"失败",zbrul2:"失败",por:"请输入说明内容",score:"2:1",type:"支持红方"},{

id:12,zbname:"中亚赛区比赛",zbtime:"2015-2-05",zbrul1:"胜利",zbrul2:"失败",por:"请输入说明内容",score:"2:1",type:"双方相同"}]

$scope.fun=function(){

var e=window.event||arguments[0]

var src=e.srcElement||e.target

if(src.nodeName=="TD"){

var par=src.parentNode

var sd=par.getElementsByTagName("td")[0]

if(sd.firstChild.checked==true){

sd.firstChild.checked=false

}else{

$("tr td").attr("checked",false)

sd.firstChild.checked=true

}

$scope.refresh=function(){//点击刷新按钮显示表格

$scope.saveDate=datalist

// console.log("结束赋予数据")

$scope.$watch("saveDate",function(){//2016.1.20监听列表生成数据，当发生变化时执行刷新列表

table_page()

$scope.isshow=true

})

}

$scope.save=function(){//页面提交按钮

console.log("准备保存")

console.log($scope.saveDate)//只要数据改变，自动保存到原始数据列表中

}

//表格分页功能

function table_page(){

var show_page=5//每页显示的条数

var page_all=$("#page").children().size()//总条数

var current_page=1//当前页

// console.log(page_all)

var page_num=Math.ceil(page_all/show_page)//总页数

var current_num=0//用于生成页标的计数器

var li=""//页标元素

while(page_num>current_num){//循环生成页标元素

li+='<li class="page_num"><a href="javasctip:(0)">'+(current_num+1)+'</a></li>'

current_num++

}

$("#page_num_all").html(li)//添加页标到页面

$('#page tr').css('display', 'none')//设置隐藏

$('#page tr').slice(0, show_page).css('display', '')//设置显示

$("#current_page").html(" "+current_page+" ")//显示当前页

$("#page_all").html(" "+page_num+" ")//显示总页数

$("#previous").click(function(){//上一页

var new_page=parseInt($("#current_page").text())-1

if(new_page>0){

$("#current_page").html(" "+new_page+" ")

tab_page(new_page)

}

})

$("#next").click(function(){//下一页

var new_page=parseInt($("#current_page").text())+1//当前页标

if(new_page<=page_num){//判断是否为最后或第一页

$("#current_page").html(" "+new_page+" ")

tab_page(new_page)

}

})

$(".page_num").click(function(){//页标跳转

var new_page=parseInt($(this).text())

tab_page(new_page)

})

function tab_page(index){//切换对应页标的页面

var start=(index-1)*show_page//开始截取的页标

var end=start+show_page//截取个数

$('#page').children().css('display', 'none').slice(start, end).css('display', '')

current_page=index

$("#current_page").html(" "+current_page+" ")

}

}).directive('contenteditable', function() {//自定义ngModel的属性可以用在div等其他元素中

return {

restrict: 'A', // 作为属性使用

require: '?ngModel', // 此指令所代替的函数

link: function(scope, element, attrs, ngModel) {

if (!ngModel) {

return

} // do nothing if no ng-model

// Specify how UI should be updated

ngModel.$render = function() {

element.html(ngModel.$viewValue || '')

}

// Listen for change events to enable binding

element.on('blur keyup change', function() {

scope.$apply(readViewText)

})

// No need to initialize, AngularJS will initialize the text based on ng-model attribute

// Write data to the model

function readViewText() {

var html = element.html()

// When we clear the content editable the browser leaves a <br>behind

// If strip-br attribute is provided then we strip this out

if (attrs.stripBr &&html === '<br>') {

html = ''

}

ngModel.$setViewValue(html)

}

})

</script>

欢迎分享，转载请注明来源：内存溢出

原文地址: https://www.outofmemory.cn/tougao/11283525.html

如图，用jquery easyui datagrid显示数据的，怎么让这两列标题隐藏。

发表评论

评论列表（0条）