mmGrid与jBox的简单整合

原创
2013/12/23 15:54
阅读数 523

【OSChina-MoPaaS应用开发大赛】Faroad进销存管理系统用到了mmGridjBox,看到有朋友提到这两个的整合,这里就把当初的摸索简单记录一下,希望能有点帮助。

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)的人一下子就喜欢上了这俩东东。

展开阅读全文
打赏
0
1 收藏
分享
加载中
CCNU博主

引用来自“爆炸”的评论

引用来自“CCNU”的评论

引用来自“爆炸”的评论

jbox的文档做的很糟糕。 submit事件的回调函数有三个参数v,h,f,除了v是value之外另外俩是什么意思呢?

f我没怎么用到,看作者的示例应该是表单form的引用吧,h是当前弹出层的句柄,可以引用当前窗口的一些内置函数或元素,类似于document的作用,看示例的这一句h.find("#yourname").val(),应该好理解点了

我也是这么猜的。作者把所有方法、事件什么的都列出来就好了。

嗯,弹出框高度大于父页面的时候有点不好拖动,当时在osc上面私信了作者,可能太少上吧,没有回信,所以自己改了下源码
2013/12/23 16:36
回复
举报

引用来自“CCNU”的评论

引用来自“爆炸”的评论

jbox的文档做的很糟糕。 submit事件的回调函数有三个参数v,h,f,除了v是value之外另外俩是什么意思呢?

f我没怎么用到,看作者的示例应该是表单form的引用吧,h是当前弹出层的句柄,可以引用当前窗口的一些内置函数或元素,类似于document的作用,看示例的这一句h.find("#yourname").val(),应该好理解点了

我也是这么猜的。作者把所有方法、事件什么的都列出来就好了。
2013/12/23 16:29
回复
举报
CCNU博主

引用来自“爆炸”的评论

jbox的文档做的很糟糕。 submit事件的回调函数有三个参数v,h,f,除了v是value之外另外俩是什么意思呢?

f我没怎么用到,看作者的示例应该是表单form的引用吧,h是当前弹出层的句柄,可以引用当前窗口的一些内置函数或元素,类似于document的作用,看示例的这一句h.find("#yourname").val(),应该好理解点了
2013/12/23 16:21
回复
举报
该评论暂时无法显示,详情咨询 QQ 群:912889742
更多评论
打赏
4 评论
1 收藏
0
分享
返回顶部
顶部