使用jQuery插件flexigrid搭建项目框架

原创 2016年05月30日 16:54:49

 今天来了,不能懒,该写就写;


1.既然是要用jQuery的JS 。那就要放入项目中


2.使用方式jsp+js:



3.调用后台

$(function() {
	$("#flexgrid").flexigrid({
		url : webroot+'sand/messageCodeImportAction!getPagedCityList.action',
		dataType : 'json',
		colModel : [ {
			display : 'ID',
			name : 'id',
			width : 80,// 得加上 要不IE报错
			sortable : true,
			hide : true,
			align : 'center'
		}, {
			display : '城市名称',
			name : 'cityName',
			width : 200,
			sortable : true,
			align : 'center'
		}, {
			display : '城市首字母',
			name : 'cityFirstLetter',
			width : 100,
			sortable : true,
			align : 'center'
		}, {
			display : '热门状态',
			name : 'hot',
			width : 150,
			sortable : true,
			align : 'center',
				process : function(value,tDiv, id){
					switch ($(tDiv).text()) {
					case '0':
						$(tDiv).html("<font color=blue>非热门</font>");
						break;
					case '1':
						$(tDiv).html("<font color=red>热门</font>");
						break;
					}
				}
		}],
		buttons : [{
			name : '删除',
			bclass : 'delete',
			onpress : action
		}, {
			separator : true
		},{
			name : '添加',
			bclass : 'add',
			onpress : action
		}, {
			separator : true
		},{
			name : '编辑',
			bclass : 'edit',
			onpress : action
		}, {
			separator : true
		}],
		sortname : "id",
		sortorder : "asc",
		usepager : true,
		useRp : true,
		checkbox : true,// 是否要多选框
		rowId : 'id',// 多选框绑定行的id
		rp : 10,
		query:'',
		showTableToggleBtn : false,
		height : window.top.document.documentElement.scrollHeight - 240
	});
	function action(com, grid) {
		switch (com) {
		case 'add':
			ids = '';
			$('.trSelected td:nth-child(2) div', grid).each(function(i) {
				if (i)
					ids += ',';
				ids += $(this).text();
			});
			sta = '';
			$('.trSelected td:nth-child(5) div', grid).each(function(i) {
				if (i)
					sta += ',';
				sta += $(this).text();
			});
			type='SEND';
			openDialog(webroot+'sand/messageCodeImportAction!openCityAddPage.action?type='+type+'&ids='+ids,500,200);
			break;
		case 'edit':
			selected_count = $('.trSelected', grid).length;
			if (selected_count == 0) {
				jqAlert("请选择需要编辑的记录!","提示");
				return;
			}
			if (selected_count > 1) {
				jqAlert("抱歉只能同时修改一条记录!","提示");
				return;
			}
			ids = '';
			$('.trSelected td:nth-child(2) div', grid).each(function(i) {
				if (i)
					ids += ',';
				ids += $(this).text();
			});
			sta = '';
			$('.trSelected td:nth-child(5) div', grid).each(function(i) {
				if (i)
					sta += ',';
				sta += $(this).text();
			});
			type='SEND';
			openDialog(webroot+'sand/messageCodeImportAction!openCityEidtPage.action?type='+type+'&ids='+ids,500,200);
			break;
		case 'delete':
			selected_count = $('.trSelected', grid).length;
			if (selected_count == 0) {
				jqAlert("请选择需要删除的记录!","提示");
				return;
			}
			ids = '';
			$('.trSelected td:nth-child(2) div', grid).each(function(i) {
				if (i)
					ids += ',';
				ids += $(this).text();
			});
			jqConfirm('确定删除?', '确认', function(r) {
		        if(r){
		        	url='sand/messageCodeImportAction!doCityDelete.action';
		        	$.ajax({
		    			url : webroot+url,
		    			data : {
		    				ids : ids,
		    			},
		    			type : 'POST',
		    			success : function(backdata) {
		    				if($.trim(backdata)=="00"){
		    				    jqAlert("删除成功!","提示",function(){
		    				    	$('#flexgrid').flexReload();// 表格重载
		    				    });
		    				}
		    			}
		    		});
		        }else{
		        	return;
		        }
		     });
			break;
		}
	}
	
	function cancelSome(ids) {
		url='sand/messageCodeImportAction!doCancelBatch.action';
		cancelOperation(ids,url);
	}
	function cancel(ids) {
		url='sand/messageCodeImportAction!doCancel.action';
		cancelOperation(ids,url);
	}
	
	function cancelOperation(ids,url) {
		$.ajax({
			url : webroot+url,
			data : {
				ids : ids
			},
			type : 'POST',
			success : function(backdata) {
				if($.trim(backdata)=="00"){
				    jqAlert("作废成功!","提示",function(){
				    	$('#flexgrid').flexReload();// 表格重载
				    });
				} else if($.trim(backdata)=="01"){
					jqAlert("系统异常,作废失败!请联系管理员!","提示",function(){
				    	
				    });
				}
			}
		});
	}
	
	
	function modify() {
		url ='sand/messageCodeImportAction!doModify.action';
		opertionVerify(ids,url);
	}
	
	function verify(ids) {
		url ='sand/messageCodeImportAction!doVerify.action';
		opertionVerify(ids,url);
	}
	
	function opertionVerify(ids,url) {
		$.ajax({
			url : webroot+url,
			data : {
				ids : ids
			},
			type : 'POST',
			success : function(backdata) {
				if($.trim(backdata)=="00"){
				    jqAlert("审核成功!","提示",function(){
				    	$('#flexgrid').flexReload();// 表格重载
				    });
				} else if($.trim(backdata)=="01"){
					jqAlert("系统异常,作废失败!请联系管理员!","提示",function(){
				    	
				    });
				}
			}
		});
	}
});


function search(){
	var dt = $('#searchform').serializeArray();
	$("#flexgrid").flexOptions( {
	    params :dt
	});
	$('#flexgrid').flexOptions( {
	    newp :1
	}).flexReload();
}
url : webroot+'sand/messageCodeImportAction!getPagedCityList.action',这是结合struts一起的开发

public void getPagedCityList() {
		String pagenum = Struts2Utils.getParameter("page"); // 页码
		String pagesize = Struts2Utils.getParameter("rp");// 每页记录数
		String name = Struts2Utils.getParameter("name");// 每页记录数
		String code = Struts2Utils.getParameter("code");//
		Integer start = 1;
		Integer limit = 10;
		if (StringUtils.isNotBlank(pagesize)) {
			limit = Integer.parseInt(pagesize);
		}
		if (StringUtils.isNotBlank(pagenum)) {
			start = (Integer.parseInt(pagenum) - 1) * limit;
		}
		PagedQueryResult paged = cityService.getPagedCityList(start, limit,
				name, code);
		Struts2Utils.renderJson(JsonUtils.toPagedJsonStr(paged, pagenum));
	}

拿别人的皮肤

蓝色皮肤

蓝色皮肤下的修改

 

灰色皮肤

灰色皮肤下的修改

 




版权声明:本文为博主原创文章,请放心使用

【jQuery插件】flexigrid

http://code.google.com/p/flexigrid/wiki/TutorialPropertiesAndDocumentation http://flexigrid.info/ $(...
  • meikidd
  • meikidd
  • 2011年06月26日 22:22
  • 632

jQuery插件flexigrid使用总结

一、参考资料 1、jQuery插件flexiGrid的完全使用,附代码下载 2、修改flexigrid源码一(json,checkbox)[原创] 3、jQuery +UI + fl...
  • binyao02123202
  • binyao02123202
  • 2014年02月02日 10:25
  • 8821

Flexigrid系列使用教程(一)前台代码及参数说明

本教程从零开始介绍Flexigrid的使用方法,记录了作者学习中的点点滴滴,实例主要是在.net mvc框架下实现的,废话不多说了,先看一下Flexigrid的效果图吧。  一、首先简单介绍一下...
  • fivedoumi
  • fivedoumi
  • 2016年10月20日 15:58
  • 873

flexigrid实际使用总结

1、隐藏某一列。 Flexigrid——colModel: 属性名 类型 描述 display string 显示的列名 name stri...
  • baidu_18607183
  • baidu_18607183
  • 2017年04月06日 16:33
  • 368

使用Eclipse开发基于SSH三大框架的Web项目带图详解

对于一名新手来说,之前一直使用的是MyEclipse,相信大家也都知道,MyEclipse用起来很方便,缺点在这就不说了!由于之前一直使用的是MyEclipse,由于种种原因(在这就不说了)需要使用E...
  • u013352832
  • u013352832
  • 2014年08月01日 13:38
  • 5488

Swift 框架搭建篇

前两篇大概的介绍了一下Swift的组成,结构,语法及与OC的去区别,本片将会以UITbaleView为例,实现框架搭建,更详细深入的剖析Swift~~~~~当然Swift的使用基本分两种,一是在OC中...
  • sinat_32915319
  • sinat_32915319
  • 2016年01月28日 17:42
  • 310

JQuery的Flexigrid的API使用

JQuery Flexigrid 是一个不错的table插件,给大家介绍一下 1.官网 http://flexigrid.info/   2.优势 支持主流的table功...
  • yongzhen150
  • yongzhen150
  • 2013年11月25日 17:23
  • 1543

jquery demo - jquery表格插件flexigrid的java简单应用实例

flexigrid效果堪比extjs,  是一个很不错了jquery表格插件 先看效果,  显示简单显示数据: 插件自动发送指定的ajax请求, 只需返回固定格式的json字符串就...
  • ghyg525
  • ghyg525
  • 2013年12月27日 15:52
  • 3061

如何自己成功搭建一个SSM框架的WEB项目

工作中我们或多或少都需要自己搭建一个框架,现在常见的Java开源框架组合方式主要为:SSH,spring+springMVC+JDBC,SSM。 其中SSM目前无论是培训机构培训亦或是招聘。都会将会...
  • sinat_28771747
  • sinat_28771747
  • 2017年06月26日 15:33
  • 4843

搭建高质量的Android项目框架系列一

1.编程规范 1.1.Application Name: 项目应用名,命名规则简单 1.2.Package Name:包名遵循“DNS反转”约定,亦即将企业组织或公司的域名反转后,...
  • fumin466566941
  • fumin466566941
  • 2016年03月18日 18:56
  • 1841
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用jQuery插件flexigrid搭建项目框架
举报原因:
原因补充:

(最多只允许输入30个字)