`
rikugun
  • 浏览: 350276 次
  • 性别: Icon_minigender_1
  • 来自: 南宁
社区版块
存档分类
最新评论

jqGrid 表格demo

    博客分类:
  • Js
阅读更多
跟原來那個flexgrid的類似,改了一些後台代碼
09-02-13 更新:
感谢tufei2006同学分享的一个demo演示 猛击这里

12.3 更新:
有群众反映jqgrid的库下不回来,我在这里贴一下吧.还有我没写过这个jsp例子.不过基本上大同小异.都是用json数据交换的.






list.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>会员管理</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" media="screen" href="../resources/js/jqGrid/themes/basic/grid.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="../resources/js/jqGrid/themes/jqModal.css" />
    <script src="../resources/js/jquery.js" type="text/javascript"></script>
    <script src="../resources/js/jqGrid/jquery.jqGrid.js" type="text/javascript"></script>
    <script src="../resources/js/jqGrid/js/jqModal.js" type="text/javascript"></script>
    <script src="../resources/js/jqGrid/js/jqDnR.js" type="text/javascript"></script>
    <script type="text/javascript" src="../resources/js/manage_user.js"></script>
    <style>
    </style>
  </head>
  <body>
    <table id="grid" class="scroll"></table>
    <div id="nav" class="scroll"></div>
  </body>
</html>


manage_user.js

var lastsel2=0;
$(function(){
    $('#grid').jqGrid({
        height:400,
        url:'?module=user&act=list&isajax=1',
        datatype: 'json',
        mtype: 'POST',
        colNames:['ID','用户名','密码','真实姓名','联系电话', 'Email'],
        colModel :[
        {
            name:'id',
            index:'id',
            width:50
        },
        {
            name:'UserName',
            index:'UserName',
            editable:true,
            editrules:{
                required:true
            }
        },
        {
            name:'PassWord',
            index:'PassWord',
            editable:true,
            edittype:'password',
            hidden:true,
            editoptions:{
                size:20
            },
            editrules:{
                edithidden:true
            }
        },
        {
            name:'LinkMan',
            index:'LinkMan',
            editable:true,
            editrules:{
                required:true
            }
        },

        {
            name:'OperateTel',
            index:'OperateTel',
            align:'right',
            editable:true,
            editrules:{
                required:true
            }
        },

        {
            name:'Email',
            index:'Email',
            align:'right',
            editable:true,
            editrules:{
                required:true
            }
        } ],
        pager: 'nav',
        rowNum:10,
        rowList:[10,20,30],
        sortname: 'MemberID',
        sortorder: "desc",
        viewrecords: true,
        imgpath: '../resources/js/jqGrid/themes/basic/images',
        caption: '用户管理',
        //        multikey:'ctrlKey',
        multiselect:true,
        
        editurl:'?module=user&act=Update'

    });

    //定义按键
    $('#grid').navGrid('#nav',{
        refresh: true,
        edit: true,
        add: true,
        del: true,
        search: true
    });


});



user.php

function  onList(){
        $in     = &$this->in;
        $tpl     = &$this->tpl;
        $dataset = &$this->objDataSet;
        $isAjax = $in['isajax'];
        if($isAjax){
        $page = $_POST['page'];
        $rp = $_POST['rows'];
        $sortname = $_POST['sidx'];
        $sortorder = $_POST['sord'];
        $q=$in['searchField'];
        $opr=$in['searchOper'];
        $q_val=$in['searchString'];
        if (!$sortname) $sortname = 'MemberID';
        if (!$sortorder) $sortorder = 'desc';

        $sort = "ORDER BY $sortname $sortorder";

        if (!$page) $page = 1;
        if (!$rp) $rp = 10;

        $start = (($page-1) * $rp);

        $limit = "LIMIT $start, $rp ";

        $sql="select MemberID,UserName,'' as PassWord,LinkMan,OperateTel,Email from user $sort";

        $total=$dataset->runSql("select count(*) as total from user");
        $total=(int)$total['total'];

        $result=$dataset->getLista($sql,$rp,$start);
        //        $this->fp->fb($result);
        $ret="{'page':'$page','total':'".ceil($total/$rp)."','records':'$total','rows':[";
        if (!empty($result)) {


        foreach($result as $key=>$row){
            if($key>0)$ret.=",";
            $ret.="{'id':'".$row[MemberID]."',";
            $ret.="'cell':[";
            $i=0;
            foreach($row as $k=>$val){
                if($i)$ret.=",";
                $ret.="'".$val."'";
                $i++;
            }
            $ret.="]}";
        }}
        $ret.="]}";
        
            $tpl->assign('ret',$ret);
            $tpl->display('./rep.json');
        }else{
            //            $tpl->assign('entities',$result);
            $tpl->display(SKIN_FILE.'user/list.html');
        }
    }
    function onUpdate(){
        $in=&$this->in;
        
        if ($in['oper']=='del') {
            $this->onDelete((int)$in['id']);
         
        }else{
           $this->onInsertOrUpdate($in['oper']);
        }
        
    }
    //会员添加
    function onInsertOrUpdate($_act='add'){
        $in      = &$this->in;
        $tpl     = &$this->tpl;
        $dataset = &$this->objDataSet;

        $data = array(
            Email          => trim($in[Email]),
            OperateTel     => trim($in[OperateTel]),
            LinkMan        => trim($in[LinkMan])
        );
        if (!empty($in['PassWord'])) {
           $data['PassWord']=md5(trim($in['PassWord']));
        }
        if($_act=='edit'){
            $MemberID = $dataset->update($data,"MemberID=".(int)$in['id'],"user");
        }else{
            $data['UserName']=$in['UserName'];
            $data['CreateTime']=time();
            $MemberID = $dataset->insert($data,"user");
        }

        $ret=json_encode(array('succees'=>true,'msg'=>'更新成功!'));
        $tpl->assign('ret',$ret);
        $tpl->display('./rep.json');
    }

    function onDelete($_id=0){
        $in = &$this->in;
        $tpl = &$this->tpl;
        $dataset = &$this->objDataSet;
        if ($_id==0) {
            $_id=(int)$in['MemberID'];
        }
        $dataset->delete("MemberID in(0,".$_id.")",'user');
        $ret=json_encode(array('succees'=>true,'msg'=>'删除成功!'));
        $tpl->assign('ret',$ret);
        $tpl->display('./rep.json');
    }
  • 大小: 51.1 KB
  • 大小: 61.9 KB
11
0
分享到:
评论
15 楼 sw970345363 2016-09-21  
[b][/b]
14 楼 yangjun6222010 2011-12-16  
   学习了。
13 楼 wm8466 2009-08-26  
请问下 修改信息怎么写啊 !
12 楼 rikugun 2009-06-04  
xiuying 写道

jqGrid 不支持的属性或对象,是怎么回事??



jquery的运行库加载了么? 你用firebug看看是哪一段出问题了,还有

jquery.jqGrid.js的

function jqGridInclude()
{
    var pathtojsfiles = "js/"; // need to be ajusted
    // set include to false if you do not want some modules to be included
    var combineIntoOne = false; 
......


这里的 var pathtojsfiles = "js/" 需要手动设置一下才行,这个是 jGrid目录下的那个js目录的路径,

我这里设置的是相对目录
11 楼 xiuying 2009-06-04  
jqGrid 不支持的属性或对象,是怎么回事??
10 楼 ctfzh 2009-03-10  
又不是jsp的例子,哎
9 楼 workman93 2009-02-27  
感谢,感谢。正下载不了呢。就找到这里了。
8 楼 rikugun 2008-11-28  
我的郵箱 v5.rikugun[at]gmail.com
7 楼 wanglidhx 2008-11-28  
rikugun 写道

wanglidhx 写道
看到你的例子真是太激动了,我正在使用jqquery 但在使用formediting出问题了,总是说对象不支持次属性和方法,而且用你navgrid函数也抱错,不是到你用的jqquery是什么版本的,能否发给我一份,经不胜感激wow,我用的是jqeury1.2.6 官網下的,jqgrid也是官网的


我也是用的这个版本,使用jsp,能否把我的jsp发给帮我看看,web服务器用tomcat5.5.12
6 楼 rikugun 2008-11-28  
wanglidhx 写道

看到你的例子真是太激动了,我正在使用jqquery 但在使用formediting出问题了,总是说对象不支持次属性和方法,而且用你navgrid函数也抱错,不是到你用的jqquery是什么版本的,能否发给我一份,经不胜感激

wow,我用的是jqeury1.2.6 官網下的,jqgrid也是官网的
5 楼 wanglidhx 2008-11-27  
看到你的例子真是太激动了,我正在使用jqquery 但在使用formediting出问题了,总是说对象不支持次属性和方法,而且用你navgrid函数也抱错,不是到你用的jqquery是什么版本的,能否发给我一份,经不胜感激
4 楼 rikugun 2008-11-25  
插入记录后会刷新一下数据的
3 楼 supercode 2008-11-23  
相当的不错
当在服务端插入记录后,只是返回了success,msg,没有返回ID
插入成功后,客户端的jqGrid会找到当前记录的最大ID+1后来新增的记录,显示这是不太合理的。不知jqGrid是怎么解决的
2 楼 rikugun 2008-11-20  
后端基本上都一样的吧,jsp的还没谢过 不好意思
1 楼 Jellee 2008-11-20  
可以共享一下jqGrid的jsp例子吗?

相关推荐

    jqGrid demo (完整版)

    "css" 文件夹包含 jqGrid 的样式文件,它们控制着表格的外观,如单元格样式、表头样式、分页样式等。开发者可以根据需求修改 CSS 来改变 jqGrid 的视觉效果。 6. **jqGrid 插件** "plugins" 文件夹可能包含 ...

    jqGrid4.6.0 jqgrid_demo40

    jquery.jqGrid-4.6.0(jquery表格插件).zip----------jqGrid4.6.0包,官网下载的,原封不动的在这里。 jqgrid_demo40-----可用的-使用方法请查看README文件.rar-----------经我修改过的demo40,官网上面demo40下载...

    jqGrid4.8.2 jqgrid_demo40

    jquery.jqGrid-4.8.2(jquery表格插件).zip----------jqGrid4.8.2包,官网下载的,原封不动的在这里。 jqgrid_demo40-----可用的-使用方法请查看README文件. jqgrid_3.6.5_API_en.chm------附加放在这里的其它资料...

    jqueryGridDemo jqGriddemo38

    在“jqueryGridDemo jqGriddemo38”这个项目中,我们深入探讨jqGrid的使用方法,并通过一系列的示例代码来帮助理解其核心概念和功能。 首先,jqGrid的基础设置通常涉及HTML结构、CSS样式和JavaScript脚本。`jqgrid....

    jqGrid 3.5源码+DEMO+DOC

    jqGrid是一款基于jQuery的开源数据网格插件,用于在网页上展示和操作表格数据。它在Web开发领域中被广泛使用,特别是在需要处理大量结构化数据的场景下。jqGrid 3.5版本是该插件的一个较早版本,但仍然具有丰富的...

    jqgriddemo,样式漂亮,可以直接使用

    jqGrid是一款基于JavaScript的开源数据网格组件,它是jQuery库的一部分,用于创建交互式的、数据丰富的Web表格。jqGrid以其强大的数据管理能力、丰富的功能集和灵活的可定制性,深受开发者的喜爱。它允许用户进行...

    jqGridDemo

    **jqGridDemo** jqGrid是一款基于JavaScript的开源网格控件,用于在Web应用程序中展示和操作数据。这个"jqGridDemo"是根据官方网站提供的示例进行调试和优化后的版本,目的是为了便于个人学习和日后查阅。jqGrid以...

    Jquery表格插件jqGrid 4.3.0及其Demo

    **jQuery表格插件jqGrid 4.3.0详解** jqGrid是一款基于JavaScript的开源网格控件,它充分利用了jQuery库的强大功能,为Web开发者提供了丰富的数据展示和操作功能。jqGrid 4.3.0是该插件的一个重要版本,它在前一...

    jqGrid MVC demo(含jqChart)

    ** jqGrid MVC demo(含jqChart)详解** `jqGrid` 是一个强大的JavaScript库,用于在Web应用中展示和操作数据。它是一个基于jQuery的表格插件,提供了丰富的功能,如分页、排序、过滤、编辑和数据导出。在这个`MVC ...

    jqGrid表格插件学习(一) 第一个Demo

    通过学习这个jqGrid的第一个Demo,你可以掌握基本的表格展示、数据操作和界面交互。随着对jqGrid更深入的理解,你会发现它能帮助你构建功能丰富的Web数据管理应用。参考博文中的示例代码,动手实践,将有助于更好地...

    jqgrid表格

    在“jqgrid表格,单元格合并,并显示,demo版本”中,我们可以深入探讨以下几个关键知识点: 1. **单元格合并**:jqGrid允许在表格中合并单元格,这在显示具有层次结构的数据时非常有用。通过设置`cellattr`或`...

    jqGrid_demo

    本资源“jqGrid_demo”包含了一个关于 jqGrid 使用的示例,帮助开发者了解如何在项目中集成和自定义这个功能丰富的表格插件。 1. **jqGrid 概述** jqGrid 是基于 jQuery 的开源数据网格组件,它支持多种数据源,如...

    jqgrid demo

    在"jqgrid demo"中,我们可以期待看到一个实际的应用实例,展示如何利用jqGrid的各种特性来构建高效的数据操作界面。 首先,jqGrid的分页功能是其核心特性之一,允许用户以页面的形式浏览大量的数据,而不是一次性...

    jqgrid_demo35

    在提供的`jqgrid_demo35`压缩包中,包含了多个示例文件,用于演示`jqGrid 3.5`的各种功能。以下是对每个文件及其可能涉及的知识点的详细说明: 1. **speed.html.bak**:这是一个备份的HTML文件,很可能包含了一个...

    JqGrid插件+JqGridDemo+JqGrid主题

    JqGrid是一款强大的JavaScript表格插件,用于在Web应用程序中展示和操作数据。它基于jQuery库,提供了丰富的功能,如数据排序、筛选、分页、编辑、添加、删除和保存等,极大地增强了网页中表格的交互性和数据管理...

    JqGrid Demo json

    **JqGrid Demo json** 是一个基于Web的前端数据展示示例,它使用了JqGrid库和JSON数据格式来实现动态、交互式的表格。JqGrid是一个强大的jQuery插件,用于创建高度可定制和功能丰富的网格视图,广泛应用于数据管理和...

    jqgrid servlet demo

    【jqGrid Servlet Demo】是一个基于Java的Web应用示例,它展示了如何在Servlet环境中使用jqGrid这个强大的jQuery插件来创建动态、交互式的表格。jqGrid是一个功能丰富的数据网格组件,能够处理大量的数据并提供排序...

    jquery的jqgrid 3.2 demo for sql 2000版本

    **jQuery的jqGrid 3.2 SQL 2000版本 Demo详解** jQuery的jqGrid是一款功能强大的数据网格插件,适用于网页上展示和操作大量结构化的数据。它以其丰富的特性、灵活的配置和高效的性能在Web开发领域广泛应用。本项目...

Global site tag (gtag.js) - Google Analytics