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

我会带着你远行 2022-08-22 14:18 194阅读 0赞

今天来了，不能懒，该写就写；

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

![Center][]

2.使用方式jsp+js:

![Center 1][]

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));
    	}

拿别人的皮肤

蓝色皮肤

![点击查看原始大小图片][80544114-bf90-3f6a-bee7-0d67ae6b9358.jpg]

蓝色皮肤下的修改

![点击查看原始大小图片][1029c10d-af52-3754-b74b-6dff1a3e3b3d.jpg]

灰色皮肤

![点击查看原始大小图片][8e2304e8-2d60-3c7c-bb4a-e7f38de3cfde.jpg]

灰色皮肤下的修改

![点击查看原始大小图片][b0b0b68c-add6-3807-b1bf-7d359896caeb.jpg]

[Center]: /images/20220722/db88849719374f2c81ca22899e3d5f1e.png
[Center 1]: /images/20220722/dd733d89d8ce47bc9d8b4da87443728d.png
[80544114-bf90-3f6a-bee7-0d67ae6b9358.jpg]: /images/20220722/5aca6ba4351744a885daf80650a07d10.png
[1029c10d-af52-3754-b74b-6dff1a3e3b3d.jpg]: /images/20220722/f7c94681216a47e5a0d88e9bc5094cad.png
[8e2304e8-2d60-3c7c-bb4a-e7f38de3cfde.jpg]: /images/20220722/3fc437b8844b4247ba218f08d28049a7.png
[b0b0b68c-add6-3807-b1bf-7d359896caeb.jpg]: /images/20220722/c0ca7b1e71914a6c98826e5a62257bbb.png