Response和Request常用方法以及mmgrid插件的学习

Response和Request

 

Response和Request容器是一一对应的，他是web容器在用户每次请求服务端的时候，创建的一对容器对象，Response容器是服务端返还给客户机的一个响应内容对象容器，比如说：响应头，响应行，实体数据等信息，而Request容器对象是，代表用户请求服务端的的一个容器对象，比如客户机的请求头，请求行，以及携带的参数信息等。所以说Request容器对象和Response容器对象是一一对应的，他们两的生命周期也是一样的，就是在一次用户请求中。Request除了有一个容器对象的角色，他还有一个角色就是Request域，Request域的范围小，他只是一次用户的请求内，即用户发送一个请求的时候，Request创建，当用户关闭这次请求的时候Request就会消亡的。

• request.getSchema()可以返回当前页面使用的协议，http 或是 https;
• request.getServerName()可以返回当前页面所在的服务器的名字;
• request.getServerPort()可以返回当前页面所在的服务器使用的端口,就是80;
• request.getContextPath()可以返回当前页面所在的应用的名字;

其他Request具体方法详见https://blog.csdn.net/qq_29464887/article/details/79030766

其他Response具体方法详见https://blog.csdn.net/qq_29464887/article/details/79031547

mmGrid 是 jQuery 实现对表格的样式库的插件。支持包括排序、Ajax、宽度锁定、列隐藏、锁定、nowrap、多选、选择和分页等功能，还可以配合Bootstrap使用，效果更加好看华丽。

mmGrid简介

这是一个基于jQuery的表格部件。它提供了几个基本的功能，可以用于面积有限却要显示较多数据的页面。 它的样式表很简单，修改起来非常容易，你可以很快的给它更换一个样式融入到你的页面中。

如果你喜欢简洁点的东西，不想在工程里加入太多依赖的文件，那你可以尝试一下它。顺便说一句，它也支持IE6这样的老古董。

使用方法

1、下载mmGrid

你可以访问mmGrid的Github地址（https://github.com/miemiedev/mmGrid），从右侧下载按钮得到mmGrid的源文件

2、引入插件文件

mmGrid有两个样式文件，第一个为主要的显示样式，第二个为分页样式，如果你的表格不需要分页，可以不用引入mmPaginator.css文件。

<link rel="stylesheet" href="../src/mmGrid.css">
<link rel="stylesheet" href="../src/mmPaginator.css">

mmGrid基于jQquery插件，所以在引入mmGrid.js文件之前，必须先引入jQuery库，如果使用了JSON数据格式，还需要引入json2.js文件，同样的mmPaginator.js文件不是必须要引入的文件

<script src="js/jquery.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/json2.js"></script>
<script src="../src/mmGrid.js"></script>
<script src="../src/mmPaginator.js"></script>

至此mmGrid的安装就算是完成了，接下来我们将介绍如何使用这个插件

3、配置插件

mmGrid支持两种数据加载方式：本地对象数据和远程AJAX数据。

本地对象数据

本地数据对象可直接新建一个JSON数组，然后在调用mmGrid的时候传入这个数据即可，数据格式参见官方示例

$('#table2-1').mmGrid({
    cols: cols,
    items: items
});

ID为table2-1的jQuery对象为我们的一个表格，里面可以不用编写任何代码，所有数据都是由我们items对象提供

以客户端数据为数据源。参数items，类型可以是对象或数组。如果数据源为对象，则使用root选项标记对象内的数组字段为数据源。

远程对象数据

远程对象数据需要配置url和method参数，数据格式参见官方提供的示例

$('#table2-2').mmGrid({
    cols: cols,
    url: 'data/stockQuote.json',
    method: 'get'
});

AJAX数据为数据源。参数url为请求地址，返回数据为json格式，可以是对象或数组。如果返回数据为对象，则使用root选项标记对象内的数组字段为数据源。

mmGrid特点

支持排序

排序参数为sortName和sortStatus。 如果初始化时设置排序列，则直接显示排序后数据。 排序方式分为客户端排序与AJAX服务器端排序，设置参数为remoteSort。 排序方式与数据源关系不大，但如果数据源为本地数据，设置remoteSort为true无效。 如果排序字段为数字类型需要将列选项添加type:'number'属性。远程排序时，列模型可以设置sortName来指定远程排序的字段名称，如不设置则为name中的值。

支持列状态

锁定列宽：锁定列宽选项为lockWidth:true。列宽被锁定后则不可调整，当表选项fullWidthRows设为true列的宽度也不参与计算。

隐藏列：隐藏列选项为hidden: true。当光标移至标题时标题最右侧会显示向下按钮，单击此按钮则可打开选项板来调整隐藏和显示的列，调整完毕后单击选项板右下方的向上按钮来关闭选项板。

锁定列显示状态：锁定列显示状态选项为lockDisplay: true。锁定列显示状态后，在选项板中列选项会被值为灰色，此列则不可调整显示状态。

内容折行

表选项nowrap设置单元格内容超出单元格长度时是否折行显示。

自适应列宽

当表选项fullWidthRows设置为true时，表格在第一次数据加载时计算列宽，将其充满整个表格。锁定列宽的列不参与计算。如果所有显示的列宽总和大于表格宽度这个参数将不起作用。

选择行

表选项multiSelect设置表格是否可多选，默认为单选。可通过表操作$('#table').mmGrid('selected')获取选择的行对象。 当光标单击单元格时触发cellSelected事件，该事件可在表选项设置。

选框列

表选项checkCol可以在表格前插入选框列。checkCol选项可以和multiSelect搭配使用。

索引列

表选项indexCol可以在表格前插入索引列。如果索引数字过大超出单元格可使用indexColWidth调整宽度。

显示全部行

表选项height设置为’auto‘时，表格显示全部行，并不显示垂直滚动条。

分页

这里的分页示例借助了分页器，开发者可以根据自己的需求选择使用其他分页器。

表头分组

列模型可嵌套一个cols选项用来将表头分组，目前只支持两层。

 

部分实例如下：

function queryData(load){
    var cols = [
        { title:'开始时间', name:'startDate' ,width:80, sortable: true, align:'center'  },
        { title:'结束时间', name:'endDate' ,width:80, sortable: true, align:'center'  },];
    var mmg = $('#mmg').mmGrid({
        height: 'auto'
        , cols: cols
        , url: path+'/？？？？/'
        , fullWidthRows: true
        , multiSelect: false
        , checkCol: false
        , nowrap:true
        , autoLoad:true
        , plugins: [
            $('#pg').mmPaginator({page:1,limit:2,totalCountName:'totalCount'})
        ]
        , params: function(){
            //如果这里有验证，在验证失败时返回false则不执行AJAX查询。
            return {page:1 , limit:2 };
        }
    });
    mmg.on('loadSuccess', function(e, data){  }

返回的表单对象grid可以进行以下表操作

名称	参数	描述
load	{} | []	如果配置过AJAX选项，则这里是AJAX参数，如果传入对象数组，则为加载本地数据。
selectedRows	无参数	返回选择行数据的数组。
selectedRowsIndex	无参数	返回选择行索引的数组。
select	int | function(item, index){ return true; } | 'all'	选中参数条件的行。int: 选中索引行; function: 过滤函数, item参数为行数据, index参数为行索引; 'all': 选中所有行。
deselect	int | function(item, index){ return true; } | 'all'	取消选中参数条件的行。int: 取消选择索引行; function: 过滤函数, item参数为行数据, index参数为行索引; 'all': 取消选中所有行。
rows	无参数	返回所有行的数据数组。
row	int	返回指定索引行的数据。
rowsLength	无参数	返回行数。
addRow	item,index	添加数据到索引行，index为可选。如item为对象数组则一次添加多行。
updateRow	item,index	更新数据到索引行，index为必选。一次只能更新一行。
removeRow	index	移除索引行。如index为索引数组则一次移除多行。如果index为undefined则移除所有行。

名称	可选值	描述
width	'auto', 500, '500px'	表格宽度。参数为'auto'和以'%'结尾,表格可在调整窗口尺寸时根据父元素调整尺寸。
height	'280px', 500, '500px'	表格高度。如果以'%'结尾,表格可在调整窗口尺寸时根据父元素调整尺寸。如果设置为'auto'，表格显示全部行，不显示垂直滚动条
url	false, string	AJAX请求数据的地址。
params	{}, object, function(){ return {}; }	AJAX请求的参数。可以是普通对象或函数。 函数返回一个参数对象，每次调用AJAX时调用。
method	'post', 'get'	AJAX提交方式。
ache	false, true	AJAX缓存。
items	[], Array	数据使用本地对象数组。
root	'', string	指定json对象的数组字段为数据。
nowrap	false, true	表格显示的数据超出列宽时是否换行。
multiSelect	false, true	数据使用本地对象数组。
fullWidthRows	false, true	true:表格第一次加载数据时列伸展，自动充满表格。
checkCol	false, true	表格显示checkbox
indexCol	false, true	表格显示索引列
indexColWidth	30	表格索引列宽度
loadingText	'正在载入...', string	数据载入时的提示文字。
noDataText	'没有数据', string	没有数据时的提示文字。
cols	[], Array	数据模型。
sortName	'', string	排序的字段名。字段名的值为列模型设置的sortName或name中的值。
sortStatus	'asc', string	排序方向。
remoteSort	false, true	是否使用服务器端排序。当值为true时，sortName和sortStatus会作为参数放入AJAX请求中。
autoLoad	true, false	是否表格准备好时加载数据。
showBackboard	true, false	是否显示选项背板。
plugins	[]	表格插件，插件必须实现 init($mmGrid)和params()方法，参考mmPaginator

二.列选项

名称	可选值	描述
title	string	标题文字。
titleHtml	string	标题文字的HTML代码。
width	int	标题宽度像素值，默认为100。
name	string	字段名。
align	'left', 'center', 'right'	文字位置。
hidden	false, true	是否隐藏列。
lockDisplay	false, true	是否锁定列的显示状态。
lockWidth	false, true	是否锁定列宽。被锁定的列不参与fitCols选项的计算。
sortable	false, true	是否可排序。
sortName	string	当sortable为true，远程排序发出的字段名，如果这个字段名为空，则发出的字段名为name的值
renderer	function(val,item,rowIndex){ return val;}	显示规则。参数: val 值, item 对象, rowIndex 行索引; 返回值: 可以是纯文本或html。
type	'number'	字段类型。只用于数字的本地排序。
cols	[], Array	数据模型。用于表头分组，目前只支持两层。

三.表操作

名称	参数	描述
load	{} | []	如果配置过AJAX选项，则这里是AJAX参数，如果传入对象数组，则为加载本地数据。
selectedRows	无参数	返回选择行数据的数组。
selectedRowsIndex	无参数	返回选择行索引的数组。
select	int | function(item, index){ return true; } | 'all'	选中参数条件的行。int: 选中索引行; function: 过滤函数, item参数为行数据, index参数为行索引; 'all': 选中所有行。
deselect	int | function(item, index){ return true; } | 'all'	取消选中参数条件的行。int: 取消选择索引行; function: 过滤函数, item参数为行数据, index参数为行索引; 'all': 取消选中所有行。
rows	无参数	返回所有行的数据数组。
row	int	返回指定索引行的数据。
rowsLength	无参数	返回行数。
addRow	item,index	添加数据到索引行，index为可选。如item为对象数组则一次添加多行。
updateRow	item,index	更新数据到索引行，index为必选。一次只能更新一行。
removeRow	index	移除索引行。如index为索引数组则一次移除多行。如果index为undefined则移除所有行。

四.事件

名称	参数	描述
loadSuccess	function(e, data){}	数据加载成功后执行。
loadError	function(e, data){}	数据加载失败后执行。
cellSelected	function(e, item, rowIndex, colIndex){}	表格中的单元格被选择后执行。item：被选择单元格所在行对应的数据对象；rowIndex：行索引；colIndex：列索引。
rowInserted	function(e, item, index){}	表格中的数据被插入后执行。item：插入的数据对象；index：行索引。
rowUpdated	function(e, oldItem, newItem, index){}	表格中的数据被更新后执行。oldItem：更新前的数据对象；newItem：更新后的数据对象；index：行索引。
rowRemoved	function(e, item, index){}	表格中的数据被删除后执行。oldItem：被删除行的数据对象；index：被删除前的行索引。

3,注意点：

1，root :'items',items对象是必须存在的，否则表格在没有数据时不会提示“没有数据”，并且默认的水平和垂直滚动条都会没有。对象存在，但对象里的内容为空时显示没有数据，对象不存在时就会出现上述情况。

 

推荐：jquery之插件mmgrid的使用方法（较详细）介绍每个属性的对应功能设计

http://blog.sina.com.cn/s/blog_a94593820102vzw2.html

转自：http://www.uedsc.com/mmgrid.html    （后附项目实例）

https://blog.csdn.net/qq_36173194/article/details/72965449