mmGrid与jBox的简单整合
【OSChina-MoPaaS应用开发大赛】Faroad进销存管理系统用到了mmGrid和jBox，看到有朋友提到这两个的整合，这里就把当初的摸索简单记录一下，希望能有点帮助。
mmGrid
mmGrid 这一块相对比较简单（说简单是因为作者包装得好勒），提供一下json数据，漂亮的表格就出现了，分页用的是mmGrid自带的插件。 mmGrid使用心得：
1.渲染：像性别这种true或false的数据反映到前端可能需要变换为"男"或"女"，所以mmGrid提供了Renderer机制
//性别
var sex_renderer=function(val){
if(val)
return '男';
else
return '女';
}
//操作
var opt_renderer=function(val){
var opt='';
opt+='<span onclick="read('+val+')">查看</span>';
opt+='<span onclick="update('+val+')">修改</span>';
return opt;
}
var cols = [{title : '性别',
name : 'sex',
width : 50,
sortable : true,
renderer:sex_renderer
}，
{title : '操作',
name : 'id',
width : 50,
renderer:opt_renderer
}];
2.刷新：mmGrid类有个load()方法，传入page属性值可以指定加载第几页，简单刷新的话传入page=1即可
mmg.load({page : 1});
有的时候我们想刷新当前页，比如修改某条数据后刷新当前页面以呈现最新结果，那只需获取当前页码传入load方法即可。
jBox
jBox提供了丰富的弹框，加载方式包括了文字加载、ajax 加载、iframe 加载等，详细内容可以参考jBox提供的 demo。个人是全部选择的ajax加载方式来打开增、删、改、查等页面。//查看
function read(id) {
$.jBox(
"get:read?id=" + id,
{
title : "查看",
width : 600,
height : 'auto',
bottomText : '<span onclick="print()">打印</span>',
buttons : {
'关闭' : 0
},
submit : function(v, h) {
if (v == 0)
return true;
return false;
},
});
}
添加、修改操作等加入了验证、loading、回调等处理
//添加
function add() {
$.jBox("get:add", {
title : "添加",
width : 600,
height : 'auto',
buttons : {
'提交' : 1,
'关闭' : 0
},
submit : function(v, h) {
h_global = h;//获取当前窗口句柄并赋值给全局变量h_global，h_global用于显示错误提示时窗口获取
if (v == 0)//点击关闭按钮
return true;
if (!add_validate(v, h))//点击提交，调用参数验证方法
return false;
var options = {
dataType : "json",
success : add_callback,//提交成功回调
error:err_callback//提交失败回调
};
$("#page_form").ajaxSubmit(options);//利用jquery.form插件异步提交表单
loading(webPath);//提交中的loading，webPath=系统根目录，用于获取资源路径
return false;
},
});
}
//数据验证
function add_validate(v, h) {
//清除原有的信息提示
h.find('.errorBlock').hide('fast', function() {
$(this).remove();
});
//判断某输入是否为空
if(document.geElementById("xxx").value==""){
//错误信息提示
$('<div class="errorBlock" style="display: none;">xx字段为空</div>').prependTo(h).show('fast');
return false;
}
reutnr true;
}
//添加成功回调
function add_callback(responseText, statusText) {
$.jBox.closeTip();//关闭loading提示
var rs = responseText;
if (rs.code == 0) {
$.jBox.close(false);//关闭提交表单弹出框
tb_refresh();//刷新列表数据
$.jBox.success("添加成功", "信息");
} else {
//错误信息提示
h_global.find('.errorBlock').hide('fast', function() {
$(this).remove();
});
$('<div class="errorBlock" style="display: none;">' + rs.msg
+ '</div>').prependTo(h_global).show('fast');
}
}
//数据提交loading画面
function loading(path) {
var loadingHtml = '<div id="loading">信息提交中<img src="' + path
+ '/images/loading.gif"/></div>';
$.jBox.tip(loadingHtml, 'loading', null, {
width : 350,
showType : 'none'
});
}
也再此感谢mmGrid和jBox的作者，让我这种只看脸(UI)的人一下子就喜欢上了这俩东东。