MMG的使用

1.导入mmg框架所需要的js和css包,在所需要的位置设置mmg的显示基点

http://www.jq22.com/demo/mmGrid-master20150916/examples/api.html

2. 初始化mmg列表

function initMmgList() {
		var cols = [ {
			title : '单位编号', 	//显示为表头
			name : 'number', 	//与后台传来json数据中的k值保持一致
			align : 'center',
			sortable : false		//是否可排序
		}, {
			title : '单位名称 ',
			name : 'name',
			align : 'center',
			sortable : false
		}{
			title : 'data',
			name : 'id',
			hidden : true,		//隐藏表头,像是id一类我们需要,但是不能显示的数据
			align : 'center',
			sortable : false
		}];
		mmg = $('#mmg').mmGrid({
			height : '98.5%',
			cols : cols,			//表头,参数为上面的数组
			method : 'get',			//AJAX提交方式
			remoteSort : true,		//是否使用服务器端排序。当值为true时,sortName	和sortStatus会作为参数放入AJAX请求中
			checkCol : true,		//表格显示checkbox,即复选框
			fullWidthRows : true,	//true:表格第一次加载数据时列伸展,自动充满表格
			items : [],				//数据使用本地对象数组
			nowrap : true,			//不折行显示
			sortName : 'SECUCODE',//排序的字段名。字段名的值为列模型设置的sortName或name中的值
			sortStatus : 'asc',		//排序方向
			showBackboard : false,	//是否显示选项背板
			autoLoad : false		//是否表格准备好时加载数据
		});
		mmg.on('cellSelected', function(e, item, rowIndex, colIndex) {//表格中的单元格被选择后执行。item:被选择单元格所在行对应的数据对象;rowIndex:行索引;colIndex:列索引。
			var id = item.id;
		});
	}

3.mmg的分页插件

1.先设置分页所需的空间

2.先利用ajax向后台发起请求,得出一共可以查出多少条符合需求的数据
3.初始化组件

var pageSize = ‘10’ 					//全局变量,默认初始为10
function pageToolbar(countNum) {
		$('#pageToolbar').empty();	//将页码置空
		$('#pageToolbar').Paging({	//初始化方法
			pagesize : pageSize,	//获取每页数据量
			count : countNum,		//数据总量
			toolbar : true,	
			callback : function(page, size, count) {    //点击分页之后的回调方法
				var startIndex = (page - 1) * size;	//数据查询的起始位置
				getData(startIndex, size);		//拿到分页起始位和每页大小之后去后台获取数据
			},
			changePagesize : function(ps) {		//修改每页数据量后执行的方法
				getData('0', ps);
			}
		});
		getData('0', pageSize);					//第一次加载时初始化列表
	}

4.ajax调用后台,根据分页拿回数据,向前台赋值

$.ajax({
		type : 'post',
		url : "/${projectName}/DataView_Add",
		async : false,
		data : {
startIndex : startIndex,				
pageCount : size
},
		success : function(data) {
			var obj = eval('(' + data + ')');
			if (obj.Result == "1") {
				var dataList = obj.data;
				var items = [];
				for ( var i = 0; i < dataList.length; i++) {
					items.push({
						'id' : dataList[i].id,			//将数据绑定到mmg的命名数组上
						'number' : dataList[i].number,
						'name' : dataList[i].name
					});
				}
				mmg1.load(items); 					//如果配置过AJAX选项,则这里是AJAX参数,如果传入对象数组,则为加载本地数据
				if(items.length > 0){
					mmg.select(0);				//默认 选择第一行数据
				}
			} else {
				errorInit1();
			}
		}
	});

你可能感兴趣的:(公司学习)