要使用jqGrid，首先页面上要引入如下css与js文件。
1、css
<link href="/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
2、js
<script src='/Scripts/js/jquery-2.0.3.min.js' type="text/javascript"></script>
<script src='/Scripts/js/jqGrid/jquery.jqGrid.min.js' type="text/javascript"></script>
<script src='/Scripts/js/jqGrid/i18n/grid.locale-en.js' type="text/javascript"></script>
二、使用要点说明
1、获取值
1、获取单个id
获取行号，有这种方式：
var rowid = $("#grid-table").jqGrid("getGridParam", "selrow")
但是经过实际验证，这种方式不可行，当选中行，再点击同一行会出现获取不到行号的情况。
最后先在js最外部定义一个变量selId，然后使用如下代码在选中行时赋值：
onSelectRow: function (rowid, status) {
selId = rowid//给最外层的selId赋值
}
2、获取多个选中行的id
var ids=$('#gridTable').jqGrid('getGridParam','selarrrow')
其输出格式是逗号分隔的id，如：
1,2,3,4,5
3、获得所有行的ID数组
var ids = $("jqgridtableid").jqGrid('getDataIDs')
4、获取行数据
如果想获取选择的行的数据，只要传入rowId即可，如下：
var rowData = $('#gridTable').jqGrid('getRowData',rowId)
而这个rowData是一个对象，如果要获取选择的行的这个对象的属性值，如name的值，需如下：
var Name= rowData.name
5、获取单元格数据
var celldata = $("jqgridtableid").jqGrid('getCell',id,colnum)
6、设定行选中
//设定选中行,可设定多行选中：
$("jqgridtableid").jqGrid('setSelection',id1)
$("jqgridtableid").jqGrid('setSelection',id2)
布局的传统解决方案，基于[盒状模型]，于那些特殊布局非常不方便。
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
2009年诞生的这个属性可以说是不亚于 css界一场蒸汽机诞生一样的工业革命，它的诞生标志着马车一样的 float被彻底抛进历史的垃圾堆。
通过display：flex 将对象设置为弹性盒子，以下属性必须熟记于心。
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。
它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
容器属性：
flex-direction（决定主轴的方向）
flex-wrap（决定是否换行）
flex-flow（ <flex-direction>|| <flex-wrap>）
justify-content（主轴方向对齐方式）
align-items（交叉轴方向对齐方式）
align-content（多轴情况下沿交叉轴对齐方式）
项目属性：
order：数值越小，排列越靠前，默认为0。
flex-grow:项目的放大比例，默认为0
flex-shrink:项目的缩小比例，默认为1
flex-basis:项目占据主轴的大小
flex：flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
两个快捷值：auto (1 1 auto) 和 none (0 0 auto)
align-self：单个项目有与其他项目不一样的对齐方式
flex-box无疑是布局上面的神器
网格布局同样是布局方面的神器，目前不太常用。
display:grid设置网格
必须使用 display: grid 将容器元素定义为一个 grid(网格) 布局，使用 grid-template-columns 和 grid-template-rows 设置 列 和 行 的尺寸大小，然后通过 grid-column 和 grid-row 将其子元素放入这个 grid(网格) 中
网格属性：
display：grid| subgrid
grid-template-columns：设置列
grid-template-rows：设置行
grid-template-areas：设置区域
grid-template：none | subgrid | <grid-template-rows>/ <grid-template-columns>前面三个属性合体
grid-column-gap：设置列间距
grid-row-gap：设置行间距
grid-gap：<grid-row-gap><grid-column-gap>前两个属性合体
justify-items：start | end | center | stretch设置项目水平方向对齐方式
align-items：start | end | center | stretch设置项目垂直方向对齐方式
justify-content：start | end | center | stretch | space-around | space-between | space-evenly 设置网格水平对齐方式
align-content： start | end | center | stretch | space-around | space-between | space-evenly 设置网格垂直对齐方式
grid-auto-columns：自动补齐列
grid-auto-rows：自动补齐行
grid-auto-flow：row | column | row dense | column dense
grid
网各项属性：
grid-column-start
grid-column-end
grid-row-start
grid-row-end
grid-column：项目放置列
grid-row：项目放置行
grid-area
justify-self
align-self
