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

本文主要是介绍使用jQuery插件flexigrid搭建项目框架,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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


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',// 多选框绑定行的idrp : 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://www.chinasem.cn/article/974076

相关文章

关于HTML的多媒体标签

代码示例如下: <!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus?"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Descriptio

关于HTML的框架标签及内嵌框架

框架标签的代码示例如下: <!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus?"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Desc

关于HTML的表格标签

代码示例如下: <!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus?"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Descriptio

关于HTML的清单标签

代码示例如下: <!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus?"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Descriptio

关于HTML的图片标签

代码示例如下: <!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus?"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Descriptio

关于HTML的字体标签

代码示例如下: <!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus?"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Descripti

关于HTML的排版标签

代码示例如下: <!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus?"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Descriptio

关于Java的数组的使用

关于一维数组的使用 代码示例一如下: package com;public class test_array {public static void main(String[] args){//1.如何定义 一个 数组//1.1数组的声明String[] names;int[] scores;//1.2数组的初始化://1.2.1静态初始化:初始化数组与数组元素赋值同时进行nam

Android_03_数据库的使用总结

前言: 1>区分SQL和SQLite SQL 是一门 ANSI 的标准计算机语言,用来访问和操作数据库系统。SQL 语句用于取回和更新数据库中的数据。 SQL 可与数据库程序协同工作,比如 MS Access、DB2、Informix、MS SQL Server、Oracle、Sybase 以及其他数据库系统。 不幸地是,存在着很多不同版本的 SQL 语言,但是为了与 ANSI 标准相