jqGrid 表格demo

最新推荐文章于 2021-07-16 14:50:32 发布
最新推荐文章于 2021-07-16 14:50:32 发布
阅读量155 收藏
点赞数
分类专栏： Js 文章标签： json jQuery JSP FP Firebug ViewUI
跟原來那個flexgrid的類似,改了一些後台代碼
09-02-13 更新:
感谢[url=http://tufei2006.iteye.com]tufei2006[/url]同学分享的一个demo演示 [url=http://jqgrid.jinjianjia.com/jqgrid33/jqgrid.html]猛击这里[/url]

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


[img]/upload/attachment/42752/7fb953b5-fdc6-39ab-b55f-d81b68d6011b.png[/img]

[img]/upload/attachment/42754/0a50c1bd-385c-3b42-984e-64b3587a63d6.png[/img]

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');
    }
iteye_10274
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JqGrid完整例子，学习linux的书籍
m0_64867688的博客
12-19 1293
2、JavaScript ;(function($){ $.fn.jqGridTypeDefine = function(options){ //获取jquery对象 var grid_selector = this; var initDate = “{oper: “”,” + “height: “”,” + “width: “”,” + "pager_selector: "typeDefinePag 《一线大厂Java面试题解析+后端开发学习笔记+最新架构讲解视频+实战项...
jqGrid 各种参数 详解
web开发自学
05-09 3117
JQGrid JQGrid是一个在jquery基础上做的一个表格控件，以ajax的方式和服务器端通信。 JQGrid Demo 是一个在线的演示项目。在这里，可以知道jqgrid可以做什么事情。 下面是转自其他人blog的一个学习资料，与其说是学习资料，说成查询帮助文档更加合适。 jqGrid学习之 ------------- 安装 jqGrid安装很简单，只需把相应的c...
编写全网最实用的的原创jqGrid例子
AinUser的博客
03-29 2256
jqGrid是一个比较使用的前端框架，主要适用于表格的显示。 jqGrid的操作大致可以参照：http://blog.mn886.net/jqGrid/(jqGrid中文api)里面的：加载数据的分类 首先粘出jsp前端页面的代码       下面是controller（控制层）代码：以分页的形式返回数据到前台 下面的就是上面控制层中的map中的参数(分页的
leetcode 二叉树的序列化和反序列化(297)
lishuangzhi的博客
07-16 118
class Codec { // Encodes a tree to a single string. public String serialize(TreeNode root) { List<Object> list = new LinkedList<>(); Queue<TreeNode> queue = new LinkedList<>(); queue.add(root);
jqgrid java 例子_jqGrid 例子 | 学步园
weixin_34069265的博客
02-16 144
var test_main = {/*初始化*/init: function(options){var defaults = {className : 'test_main',alertfield: 'name',caption : '测试',grid : '#grid_test',pager : '#pager_test',error : '#error_test'...
jqgrid表格
06-01
在“jqgrid表格，单元格合并，并显示，demo版本”中，我们可以深入探讨以下几个关键知识点： 1. **单元格合并**：jqGrid允许在表格中合并单元格，这在显示具有层次结构的数据时非常有用。通过设置`cellattr`或`...
jqGridDemo
01-11
**jqGridDemo** jqGrid是一款基于JavaScript的开源网格控件，用于在Web应用程序中展示和操作数据。这个"jqGridDemo"是根据官方网站提供的示例进行调试和优化后的版本，目的是为了便于个人学习和日后查阅。jqGrid以...
jqgriddemo.zip
06-15
在“jqgriddemo.zip”这个压缩包中，包含的是 jqGrid 的各种表格应用示例，主要用于展示其功能和用法，版本为 5.0。这个离线 demo 打包非常适合开发者在没有网络连接的情况下学习和测试 jqGrid。 jqGrid 提供了丰富...
jqGrid表格底部汇总、合计行footerrow处理
12-10
然后再看个DEMO，看看jqGrid表格底部汇总、合计行到底如何实现。 1、user-guide关于jqGrid合计行的说明 1）表格配置：footerrow, boolean, 默认false If set to true this will place a footer table with one row ...
jqGrid demo （完整版）
10-28
一款完整版的jqGrid Demo ，对网站编程的朋友帮助很大 。可以简单实现PHP 与表格之间的运作，也可改编实现Jsp。
jqGrid（jqueryGrid表格操作demo）
04-18
jquery的 表格操作demo，程序是vs2010的，类似excel表格操作数据的话，还是很有用的，简单实用强大。
Jquery表格插件jqGrid 4.3.0及其Demo
12-20
JqGrid是一款功能强大的Jquery表格控件,支持排序,分组,分页,行内编辑,表格树,行内表格等多种功能，该版本为官方最新版，附带Demo
jqgrid实例保存
08-16
jqgrid实例保存
jqGrid5.X 官方全Demo下载
06-07
jqgrid 中文文档离线demo打包. 下载 本地可架设运行
JqGrid 完整例子
qianbihua00的博客
03-25 193
JqGrid 例子可以参考http://blog.mn886.net/jqGrid/ 完整实例压缩包http://download.csdn.net/detail/ruthywei/9888200 jqGrid学习之 ------------- 安装 jqGrid安装很简单，只需把相应的css、js文件加入到页面中即可。 按照官网文档: /myproject/css/ ui.jqgrid.css /ui-lightness/ ...
juery.jqgrid新建demo
qq_24524781的博客
11-30 1899
基本配置好了以后，使用jqgrid创建第一个表格。样式如下图： 页面代码如下： My First Grid html, body { margin: 0; padding: 0; font-size: 75%; } $(document).ready(    function() { jQuery("#list4").jqGrid
jqGrid DEMO
white__cat的专栏
02-17 1832
http://www.guriddo.net/demo/bootstrap/
简单的jqGrid示例
08-06
一个简单的jqGrid示例，文件内包含多个文件夹(文件夹内是css和js为html页面引用)和三个html页面，一个页面为文档，另外两个页面显示数据，这两个页面都是从Javascript数组为数据源来加载数据，只是两个数据的内容不同。希望对大家有帮助
jqGrid jsonreader demo
最新发布
06-02
下面是一个简单的jqGrid和jsonreader的demo： HTML代码： ``` <table id="myGrid"></table> <div id="myPager"></div> ``` JavaScript代码： ``` $(function () { $("#myGrid").jqGrid({ url: "data.json", ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值