整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
CSS grid布局是一種很強(qiáng)大的布局，兼容性如上表所示，表現(xiàn)在控制臺(tái)里，你可以清楚看到他的內(nèi)部每一個(gè)塊都由一個(gè)虛線方塊組成。他的每行每列都會(huì)生產(chǎn)一個(gè)單元格，而劃分他們之間的線稱(chēng)為網(wǎng)格線。我這次就主要講述其中兩個(gè)屬性。
1.grid-template-columns(rows), 他可以的定義網(wǎng)格列或者行的維度大小，在屬性數(shù)值上，除了比較常用的屬性，還支持fr，flex彈性系數(shù)，可以根據(jù)該數(shù)值比例來(lái)分配剩余空間。還有[xx]在屬性數(shù)值里定義網(wǎng)格線的名稱(chēng)，方便以后再次引用他。還有repeat屬性。
如圖所示的樣式，是類(lèi)似列表一樣有很多重復(fù)的模塊，就可以用到repeat屬性來(lái)進(jìn)行重復(fù)。
repeat(5, 250px);類(lèi)似這樣的屬性數(shù)值。那么我就想了，如果只是這樣，普通的布局也能實(shí)際，為啥要用這個(gè)repeat呢。如果我想自適應(yīng)寬度變化可以嗎？答案是支持的。repeat還支持auto-fill, auto-fit這2個(gè)屬性能進(jìn)行自動(dòng)填充，配合minmax屬性可以實(shí)現(xiàn)根據(jù)寬度進(jìn)行子列表的自適應(yīng)布局。如：repeat(auto-fill, minmax(100px, 1fr)); 代表了自動(dòng)填充，minmanx最小值，配合flex分配空間。
關(guān)于autfo-fit，autofill的區(qū)別在mdn上有解釋?zhuān)强赡茈y理解，直接利用mdn上2個(gè)例子。
grid-template-columns: repeat(auto-fill, minmax(10px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));
可以清楚的看到，在網(wǎng)格不能填滿(mǎn)一行的時(shí)候，auto-fit會(huì)盡可能的讓元素去填滿(mǎn)他，也就是說(shuō)剩余的空間會(huì)被分配到每個(gè)元素上,而auto-fill還是按照原來(lái)的布局，模擬元素可以填滿(mǎn)一行的情況。
2.grid-gap設(shè)置網(wǎng)格行和列之間的間隙大小
兼容情況如下圖所示：
根據(jù)mdn文檔，實(shí)驗(yàn)中的功能gap(grid-gap)屬性也被flex布局所支持。但是兼容性應(yīng)該不好太好。
gap屬性有什么用呢？
如上圖布局,如果支持gap，那么只要之間寫(xiě)一個(gè)gap: 1px就可以了。不然的話，就比較繁瑣了，只能利用邊距去實(shí)現(xiàn)。
css grid還有很多屬性可以用來(lái)布局元素，本文僅僅只是講到了一小點(diǎn)。它在現(xiàn)代瀏覽器中的支持度還是不錯(cuò)的，可以多多用它。如果支持的瀏覽器兼容性不是太好的話，只能用其他東西來(lái)代替它了。
給你代碼｜往期回顧：
給你代碼：短鏈接生成原理
給你代碼：網(wǎng)站圖標(biāo)favicon自動(dòng)抓取
給你代碼：chrome插件心得
于工作需要，把原來(lái)的920px的網(wǎng)站要求使用960 Grid的標(biāo)準(zhǔn)來(lái)做，特地研究下了960 Grid System。說(shuō)實(shí)在話我已經(jīng)有點(diǎn)Out。簡(jiǎn)單的講，960 GS就是一種基于網(wǎng)格的布局框架，使用它可以極大地簡(jiǎn)化頁(yè)面的布局工作。要是你象我一樣不太擅長(zhǎng)做頁(yè)面這些活，那它就是為你準(zhǔn)備的。
官方網(wǎng)站：http://960.gs/
自出道以來(lái)，960 GS就受到了大家的熱捧，關(guān)于它的介紹文章和示例簡(jiǎn)直鋪天蓋地，隨便用Google一搜就有一長(zhǎng)串列表供你選擇。有鑒于此，本文并不打算在拾人牙慧，再嚼現(xiàn)飯，而只是簡(jiǎn)要說(shuō)明其用法以及核心css文件，960.css，中各class的說(shuō)明。各看官權(quán)且把本文作為960 GS的Cheat Sheet吧。
用法
在Web工程里引入960.css，你就可以安心使用其定義的各個(gè)class了。除了這個(gè)必須引入的文件，960 GS提供的下載包中還有兩個(gè)css文件值得一提：reset.css和text.css。這兩個(gè)文件的主要作用是為了消除瀏覽器間顯示差異準(zhǔn)備的，前者消除了html標(biāo)簽在各瀏覽器間的差異，而后者則主要針對(duì)的是字體。
對(duì)于這類(lèi)消除瀏覽器差異的css文件，一般建議還是使用為妙。一來(lái)是因?yàn)楹?jiǎn)單，使用它們除了在頁(yè)面開(kāi)始引入之外就沒(méi)有其他工作量；二來(lái)是用上它們還保證了應(yīng)用在不同瀏覽器間的一致性，真是方便實(shí)惠。
Class說(shuō)明
960.css里提供了以下class：
container_12和container_16，用于最外層的div，它們確定頁(yè)面采用12列布局還是16列布局。grid_*，代表n列寬。12列對(duì)應(yīng)1～12，16列對(duì)應(yīng)1～16。使用時(shí)，一行內(nèi)的grid數(shù)值之和等于container數(shù)值。clear，清除上一行的樣式，一般在分行時(shí)使用。push_*和pull_*，將div往內(nèi)推或往外拉n列寬。prefix_*和suffix_*，在div的前后留n列寬空白。alpha和omega，分別應(yīng)用到內(nèi)嵌表格的第一個(gè)和最后一個(gè)，其目的是為了去掉表格之間的空白。因?yàn)榭蜃?nèi)嵌表格的外部表格本身已經(jīng)有了自己與其他表格之間的空白，因此內(nèi)嵌表格和外部表格之間的空白一般是不美觀，不必要的。
在使用時(shí)需注意960 GS的限制：
頁(yè)面的寬度限制為960px。上述class只限定了div的寬度，高度由開(kāi)發(fā)者自行控制。只提供了12列、16列和24列布局。功能單一，只聚焦簡(jiǎn)化布局。
.引用相關(guān)頭文件
引入CSS：
<link href="Scripts/jquery-ui-1.8.1.custom.css" rel="stylesheet" type="text/css" />
<link href="Scripts/ui.jqgrid.css" rel="stylesheet" type="text/css" />
引入JS：
<script src="Scripts/jquery-1.5.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui.min.js" type="text/javascript"></script>
<script src="Scripts/grid.locale-en.js" type="text/javascript"></script>
<script src="Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
因?yàn)閖qGrid3.6及以后的版本集成了jQuery UI，所以，此處需要導(dǎo)入U(xiǎn)I相關(guān)js和css。另外grid.locale-en.js這個(gè)語(yǔ)言文件必須在jquery.jqGrid.min.js之前加載，否則會(huì)出問(wèn)題。
2.將jqgrid加入頁(yè)面中
根據(jù)jqGrid的文檔，要想生成一個(gè)jqGrid，最直接的方法就是：
$("#list").jqGrid(options);
其中l(wèi)ist是頁(yè)面上的一個(gè)table：<table id="list"></table>
下面是一個(gè)簡(jiǎn)單的例子：
<script type="text/javascript">
$(document).ready(function () {
jQuery("#list").jqGrid({
url: 'Handler.ashx',
datatype: "json",
mtype: 'GET',
colNames: ['SalesReasonID', 'Name', 'ReasonType', 'ModifiedDate'],
colModel: [
{ name: 'SalesReasonID', index: 'SalesReasonID', width: 40, align: "left", editable: true },
{ name: 'Name', index: 'Name', width: 100, align: "center" },
{ name: 'ReasonType', index: 'ReasonType', width: 100, align: "center" },
{ name: 'ModifiedDate', index: 'ModifiedDate', width: 150, align: "center", search: false }
],
rowList: [10, 20, 30],
sortname: 'SalesReasonID',
viewrecords: true,
sortorder: "desc",
jsonReader: {
root: "griddata",
total: "totalpages",
page: "currpage",
records: "totalrecords",
repeatitems: false
},
pager: jQuery('#pager'),
rowNum: 5,
altclass: 'altRowsColour',
//width: 'auto',
width: '500',
height: 'auto',
caption: "DemoGrid"
}).navGrid('#pager', { add: true, edit: true, del: true,search:false,refresh:false }); ;
})
二、 jqgrid的重要選項(xiàng)
具體的options參考，可以訪問(wèn)jqGrid文檔關(guān)于option的章節(jié)（http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options）。其中有幾個(gè)是比較常用的，重點(diǎn)介紹一下：
2.1 prmNames選項(xiàng)
prmNames是jqGrid的一個(gè)重要選項(xiàng)，用于設(shè)置jqGrid將要向Server傳遞的參數(shù)名稱(chēng)。其默認(rèn)值為：
prmNames : {
page:"page", // 表示請(qǐng)求頁(yè)碼的參數(shù)名稱(chēng)
rows:"rows", // 表示請(qǐng)求行數(shù)的參數(shù)名稱(chēng)
sort: "sidx", // 表示用于排序的列名的參數(shù)名稱(chēng)
order: "sord", // 表示采用的排序方式的參數(shù)名稱(chēng)
search:"_search", // 表示是否是搜索請(qǐng)求的參數(shù)名稱(chēng)
nd:"nd", // 表示已經(jīng)發(fā)送請(qǐng)求的次數(shù)的參數(shù)名稱(chēng)
id:"id", // 表示當(dāng)在編輯數(shù)據(jù)模塊中發(fā)送數(shù)據(jù)時(shí)，使用的id的名稱(chēng)
oper:"oper", // operation參數(shù)名稱(chēng)
editoper:"edit", // 當(dāng)在edit模式中提交數(shù)據(jù)時(shí)，操作的名稱(chēng)
addoper:"add", // 當(dāng)在add模式中提交數(shù)據(jù)時(shí)，操作的名稱(chēng)
deloper:"del", // 當(dāng)在delete模式中提交數(shù)據(jù)時(shí)，操作的名稱(chēng)
subgridid:"id", // 當(dāng)點(diǎn)擊以載入數(shù)據(jù)到子表時(shí)，傳遞的數(shù)據(jù)名稱(chēng)
npage: null,
totalrows:"totalrows" // 表示需從Server得到總共多少行數(shù)據(jù)的參數(shù)名稱(chēng)，參見(jiàn)jqGrid選項(xiàng)中的rowTotal
}
2.2 jsonReader選項(xiàng)
jsonReader是jqGrid的一個(gè)重要選項(xiàng)，用于設(shè)置如何解析從Server端發(fā)回來(lái)的json數(shù)據(jù)，如果Server返回的是xml數(shù)據(jù)，則對(duì)應(yīng)的使用xmlReader來(lái)解析。jsonReader的默認(rèn)值為：
jsonReader : {
root: "rows", // json中代表實(shí)際模型數(shù)據(jù)的入口
page: "page", // json中代表當(dāng)前頁(yè)碼的數(shù)據(jù)
total: "total", // json中代表頁(yè)碼總數(shù)的數(shù)據(jù)
records: "records", // json中代表數(shù)據(jù)行總數(shù)的數(shù)據(jù)
repeatitems: true, // 如果設(shè)為false，則jqGrid在解析json時(shí)，會(huì)根據(jù)name來(lái)搜索對(duì)應(yīng)的數(shù)據(jù)元素（即可以json中元素可以不按順序）；而所使用的name是來(lái)自于colModel中的name設(shè)定。
cell: "cell",
id: "id",
userdata: "userdata",
subgrid: {
root:"rows",
repeatitems: true,
cell:"cell"
}
}
假如有下面一個(gè)json字符串：
{"totalpages":"3","currpage":"1","totalrecords":"11","griddata":[{"SalesReasonID":"1","Name":"Price","ReasonType":"Other","ModifiedDate":"1998年6月1日"},{"SalesReasonID":"2","Name":"On Promotion","ReasonType":"Promotion","ModifiedDate":"1998年6月1日"},{"SalesReasonID":"3","Name":"Magazine Advertisement","ReasonType":"Marketing","ModifiedDate":"1998年6月1日"},{"SalesReasonID":"4","Name":"Television Advertisement","ReasonType":"Marketing","ModifiedDate":"1998年6月1日"},{"SalesReasonID":"5","Name":"Manufacturer","ReasonType":"Other","ModifiedDate":"1998年6月1日"}]}
其對(duì)應(yīng)的jsonReader為：jsonReader: {
root: "griddata",
total: "totalpages",
page: "currpage",
records: "totalrecords",
repeatitems: false
}
注：cell、id在repeatitems為true時(shí)可以用到，即每一個(gè)記錄是由一對(duì)id和cell組合而成，即可以適用另一種json結(jié)構(gòu)。援引文檔中的例子：
repeatitems為true時(shí)：
jQuery("#gridid").jqGrid({
...
jsonReader : {
root:"invdata",
page: "currpage",
total: "totalpages",
records: "totalrecords"
},
...
});
json結(jié)構(gòu)為：
{
"totalpages": "xxx",
"currpage": "yyy",
"totalrecords": "zzz",
"invdata" : [
{"id" :"1", "cell" :["cell11", "cell12", "cell13"]}, // cell中不需要各列的name，只要值就OK了，但是需要保持對(duì)應(yīng)
{"id" :"2", "cell" :["cell21", "cell22", "cell23"]},
...
]
}
repeatitems為false時(shí)：
jQuery("#gridid").jqGrid({
...
jsonReader : {
root:"invdata",
page: "currpage",
total: "totalpages",
records: "totalrecords",
repeatitems: false,
id: "0"
},
...
});
json結(jié)構(gòu)為：
{
"totalpages" : "xxx",
"currpage" : "yyy",
"totalrecords" : "zzz",
"invdata" : [
{"invid" : "1","invdate":"cell11", "amount" :"cell12", "tax" :"cell13", "total" :"1234", "note" :"somenote"}, // 數(shù)據(jù)中需要各列的name，但是可以不按列的順序
{"invid" : "2","invdate":"cell21", "amount" :"cell22", "tax" :"cell23", "total" :"2345", "note" :"some note"},
...
]
}
2.3 colModel的重要選項(xiàng)
colModel也有許多非常重要的選項(xiàng)，在使用搜索、排序等方面都會(huì)用到。這里先只說(shuō)說(shuō)最基本的。
三、 注意事項(xiàng)
1. 動(dòng)態(tài)改變Add Form或者Edit Form中的select的內(nèi)容，如：改變下圖中的Comparator下拉中的內(nèi)容。
$("#list_d").navGrid('#pager_d',{add:true,edit:true,del:true,search:false,refresh:false},
{
checkOnSubmit:false, closeAfterEdit: true,recreateForm:true,
beforeInitData:function(formid){
initComparator();
},
beforeShowForm: function(formid){
$("#list_d").jqGrid('setColProp', 'Name', { editrules:{required:false},});
$('#tr_Name', formid).hide();
}
}，//edit
{},//add
{}//del
）
beforeInitData, beforeShowForm在每次點(diǎn)擊編輯的時(shí)候都會(huì)執(zhí)行。initComparator的作用是通過(guò)ajax獲取數(shù)據(jù)，然后利用$("#list_d").jqGrid('setColProp', 'Comparator', { editoptions: { value: valueString} });來(lái)設(shè)置Comparator下拉中的內(nèi)容。其中valueString的格式如下’ equal to: equal to; not equal to: not equal to’。鍵值之間用冒號(hào)隔開(kāi)，2項(xiàng)之間用分號(hào)隔開(kāi)。注意：把recreateForm設(shè)為true，否則'setColProp'只在第一次調(diào)用時(shí)有效。
2. var rowNum=parseInt($(this).getGridParam("records"), 10); 得到數(shù)據(jù)條數(shù)。
3. jQuery("#list_d").clearGridData();清空數(shù)據(jù)。
4. jQuery("#list").getCell(ids,"Key");獲取第ids行的key列。
5. $("#list").jqGrid('setSelection', "1");選中第一行。放在loadComplete：中在gird加載完成的時(shí)候自動(dòng)選中第一行。loadComplete:function(data){$("#list").jqGrid('setSelection', "1");
}
6. 對(duì)于像1中的可編輯的字段，可以設(shè)定rule，參見(jiàn)http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules#editrules
7. 修改Option，以URL為例
jQuery("#list_d").jqGrid('setGridParam',{url:"xxx.aspx",page:1}).trigger('reloadGrid');
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
