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

jQuery +UI + flexigrid做的一个用户管理界面,

    博客分类：
  • Js
UIjQueryjsonIECSS 
阅读更多
jQuery 版本必须是最新的 1.2.6 否则就出错,我折腾了1天的UI.jQuery
目前症状为IE下不显示表格中的数据









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" href="../resources/css/jq/default/ui.all.css">
    <link rel="stylesheet" type="text/css" href="../resources/css/flexigrid/flexigrid.css">
    <script type="text/javascript" src="../resources/js/jquery.js"></script>
    <script type="text/javascript" src="../resources/js/jquery.ui.all.js"></script>
    <script type="text/javascript" src="../resources/js/jquery.form.js"></script>
    <script type="text/javascript" src="../resources/js/flexigrid.js"></script>
    <script type="text/javascript" src="../resources/js/manage_user.js"></script>
    <style>

              .flexigrid div.fbutton .add
              {
                background: url(../resources/css/images/add.png) no-repeat center left;
              }

              .flexigrid div.fbutton .delete
              {
                background: url(../resources/css/images/close.png) no-repeat center left;
              }

    </style>
  </head>
  <body>
<!--   
<div id="grid"></div>
<div id="panle" style="display:none;"> 
  -->
<!-- 据lichuhui大大说改成table就可以,我这没IE测试不了 -->
<table id="grid"></table>
 <table id='panle' style='display:none'/>   
      <div id="dialog_div">
        <form action="?module=user&act=insertorupdate" id="dialog_form">
          <input type="hidden" name="MemberID"/>
          登录名:<input type="text" name="UserName"/><br/>
          密码:<input type="password" name="PassWord"/><br/>
          真实名称:<input type="text" name="LinkMan"/><br/>
          联系电话:<input type="text" name="OperateTel"/><br/>
          Email:<input type="text" name="Email"/><br/>
        </form>
      </div>
    </div>
  </body>
</html>


manage_user.js 
$(function(){
    $('#dialog_div').dialog({
        hide:'',    //点击关闭是隐藏,如果不加这项,关闭弹窗后再点就会出错.
        autoOpen:false,
        height:250,
        modal:true, //蒙层
        title:'个人用户管理',
        overlay: {
            opacity: 0.5,
            background: "black"
        },
        buttons:{
            '提交':function(){
                addUser();
            },
            '取消':function(){
                $(this).dialog("close");
            },
            '重置':function(){
                $(this).children('form')[0].reset();
            }
        }
    });
    $('#grid').flexigrid({
        url: '?module=user&act=list&isajax=1',
        dataType: 'json',
        colModel : [
        {
        display: 'id',
        name : 'MemberID',
        width:50,      //得加上 要不IE报错
        hide:true
        },
        {
        display: '登录名',
        name : 'UserName',
        width : 150,
        sortable : true,
        align: 'center'
        },
        {
        display: '密码',
        name : 'PassWord',
        width : 150,
        hide:true
        },
        {
        display: '真实姓名',
        name : 'LinkMan',
        width : 100,
        sortable : true,
        align: 'left'
        },

        {
        display: '联系电话',
        name : 'OperateTel',
        width : 150,
        sortable : true,
        align: 'left'
        },

        {
        display: 'Email',
        name : 'Email',
        width : 250,
        sortable : true,
        align: 'left'
        }
        ],
        buttons : [
        {
        name: '添加',
        bclass: 'add',
        onpress : call
        },
        {
        name: '修改',
        bclass: 'add',
        onpress : call
        },
        {
        name: '删除',
        bclass: 'delete',
        onpress : call
        },

        {
            separator: true
    }
    ],
    searchitems : [
    {
    display: '登录名',
    name : 'UserName'
    },

    {
    display: 'Email',
    name : 'Email'
    }
    ],
    sortname: "memberid",
    sortorder: "asc",
    usepager: true,
    title: '用户管理',
    useRp: true,
    rp: 20,
    showTableToggleBtn: true,
    width: 750,
    height: 400
    
    });

});

/**
 * 更新用户
 */
function call(com,grid) {
    switch (com) {
        case '添加':
            $('#dialog_div').dialog('open').children('form')[0].reset();
            break;
        case '修改':
            selected_count=$('.trSelected',grid).length;
            if (selected_count==0) {
                alert('请选择一条记录');
                return;
            }
            if(selected_count>1){
                alert('抱歉只能同时修改一条');
                return;
            }
            data=new Array();
            $('.trSelected td',grid).each(function(i){
                data[i]=$(this).children('div').text();
            });
            form=$('#dialog_div').dialog('open').children('form');
            form.children('input[name=MemberID]').val(data[0]);
            form.children('input[name=UserName]').val(data[1]);
            form.children('input[name=PassWord]').val(data[2]);
            form.children('input[name=LinkMan]').val(data[3]);
            form.children('input[name=OperateTel]').val(data[4]);
            form.children('input[name=Email]').val(data[5]);
            $('#dialog_div').dialog('open');
            break;
        case '删除':
            names='';
            $('.trSelected td:nth-child(2) div',grid).each(function(i){
                if(i)names+=',';
                names+=$(this).text();
            });
            ids='';
            $('.trSelected td:nth-child(1) div',grid).each(function(i){
                if(i)ids+=',';
                ids+=$(this).text();
            })
            if(confirm("确定删除用户["+names+"]?")){
                delUser(ids);
            }
            break;
        
    }
    
}

function addUser(){
    $('#dialog_form').ajaxSubmit({
        type:'POST',
        dataType:'json',
        resetForm:true,
        success:function(){
        $('#grid').flexReload();
        }
    });
    
}
function delUser(ids){
    $.ajax({
        url:'?module=user&act=delete',
        data:{
            MemberID:ids
        },
        type:'POST',
        dataType:'json',
        success:function(){
           $('#grid').flexReload();
        }
    });
     
}


user.php 的部分 
function  onList(){
        $in     = &$this->in;
        $tpl     = &$this->tpl;
        $dataset = &$this->objDataSet;
        $isAjax = $in['isajax'];
        $page = $_POST['page'];
        $rp = $_POST['rp'];
        $sortname = $_POST['sortname'];
        $sortorder = $_POST['sortorder'];

        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,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':$total,'rows':[";
        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.="]}";
        if($isAjax){
            $tpl->assign('ret',$ret);
            $tpl->display('./rep.json');
        }else{
            //            $tpl->assign('entities',$result);
            $tpl->display(SKIN_FILE.'user/list.html');
        }
    }

    //会员添加
    function onInsertOrUpdate(){
        $in      = &$this->in;
        $tpl     = &$this->tpl;
        $dataset = &$this->objDataSet;

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

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

    function onDelete(){
        $in = &$this->in;
        $tpl = &$this->tpl;
        $dataset = &$this->objDataSet;
        $dataset->delete("MemberID in(0,".$in['MemberID'].")",'user');
        $ret=json_encode(array('succees'=>true,'msg'=>'删除成功!'));
        $tpl->assign('ret',$ret);
        $tpl->display('./rep.json');
    }
  • 大小: 35.6 KB
  • 大小: 51.2 KB
  • 大小: 51.8 KB
15
顶
3
踩
分享到：
| apache rewrite模块的 .htaccess的斜杠问题
评论
16 楼 xzch 2013-03-11  
能不能给我一份代码？邮箱：xzch1314@163.com  谢了
15 楼 anyanlonga 2012-07-07  
动感晴 写道
能不能弄个java的啊

[color=red][/color]
14 楼 renlei413326889 2011-09-19  
请问一下 怎么设置表格显示超链接，点击可以跳转？ 请留言，谢谢~
13 楼 jkuyjava 2010-02-21  
请问分页是如何实现的，请指导一下，谢谢！
12 楼 动感晴 2010-02-08  
能不能弄个java的啊
11 楼 rikugun 2009-12-14  
bevis.cn 写道
是Flexigrid，不是flexgrid

抱歉,写错了. 感谢你那么仔细看
10 楼 bevis.cn 2009-12-14  
是Flexigrid，不是flexgrid
9 楼 supercode 2008-11-22  
希望html,css,js很快被取代
8 楼 lichuhui 2008-11-14  
*******IE下不显示表格中的数据********
<table id="grid" style="display: none"></table>
用table不要用div
<div id="grid" style="display: none"></div>
7 楼 liuye 2008-10-30  
有没有flexgrid在java下使用过，好像有问题
6 楼 liuye 2008-10-30  
flexgrid是不是有bug,怎么在Java下怎么都没有记录显示出来？
5 楼 rikugun 2008-10-17  
ming206 写道

您好，我正在研究这个，能否把您做的打包发给我？我的email:
ming204@163.com

代码都贴在上头了,你复制一下就可以了
4 楼 ming206 2008-10-17  
您好，我正在研究这个，能否把您做的打包发给我？我的email:
ming204@163.com
3 楼 rikugun 2008-10-14  
a3mao 写道

怎么没有个截图啊

不好意思,现在补上
2 楼 a3mao 2008-10-14  
怎么没有个截图啊
1 楼 rikugun 2008-10-13  
傍晚在FF3和Safari测试通过,工作正常,在IE下就不正常了,连flexgrid的框架都没出来.Ms 战汝娘亲
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery+flexigrid使用方法.pdf

    在HTML结构中，定义一个无内容的表格元素`&lt;table id="grid"&gt;&lt;/table&gt;`，在文档加载完成后，使用jQuery的`$(document).ready()`来初始化Flexigrid。 5. **Flexigrid配置** 初始化Flexigrid时，需要指定URL（获取...

    表格UI flexigrid 的一个普通演示示例

    在这个“表格UI flexigrid的一个普通演示示例”中，我们将探讨Flexigrid的核心特性及其在实际应用中的实现方式。 首先，让我们来了解Flexigrid的基本结构。Flexigrid基于HTML、CSS和JavaScript，特别是jQuery库，...

    jQuery中文帮助文档 +jQuery ui部分完全版

    jQuery UI是一个基于jQuery的用户界面库，它提供了许多可定制的UI组件，如： 1. **对话框（Dialog）**：`$("#dialog").dialog()`可以创建一个模态或非模态对话框，提供关闭按钮和其他配置选项。 2. **拖放...

    Jquery仿Ext表格flexigrid

    之后，选择一个HTML表格元素，并调用`.flexigrid()`方法，传递配置参数，如表格URL、分页参数、列定义等。 3. **数据源与Ajax交互** Flexigrid支持通过Ajax从服务器动态获取数据，只需在初始化时提供数据接口URL。...

    jquery ui插件

    jQuery UI 是一个基于 jQuery JavaScript 库的用户界面组件集合，它提供了丰富的交互效果、可自定义的主题以及各种可重用的UI元素，使得开发者能够更轻松地创建美观且功能强大的Web应用程序。在"jquery ui插件"这个...

    jquery grid demo

    总之，`JQueryGridDemo` 提供了一个学习和实践 `jQuery Flexigrid` 和 `DatePicker` 集成的好例子，有助于提升开发者在网页数据管理和用户交互方面的技能。通过深入研究，你可以掌握更多前端开发技巧，为你的项目...

    FlexigridForAsp.Net(Web+MVC) 封装

    在Web Forms中，通常会创建一个服务器控件，继承自System.Web.UI.WebControls.WebControl或System.Web.UI.WebControls.WebControlsBase，然后在控件内部处理Flexigrid的初始化、绑定数据和事件处理等逻辑。...

    jQuery插件

    4. **jquery-ui-1.8.23.custom.zip**：这是jQuery UI的一个版本，它是jQuery的一个官方库，包含了各种用户界面元素，如对话框、滑块、日期选择器、拖放等。 5. **jquery.autocomplete.zip**：这个插件提供了自动...

    一些有用的jQuery插件

    在IT行业中，jQuery是一个广泛使用的JavaScript库，它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。本文将深入探讨标题中提到的一些有用的jQuery插件，尤其是与树形插件和Flexigrid相关的应用，同时结合...

    jQuery常用插件大全pdf

    ### jQuery常用插件详解 ...以上插件覆盖了jQuery应用中的多种需求，从UI组件、数据处理到内容展示，每种插件都针对特定功能进行了优化，极大地丰富了Web开发者的选择范围，提高了开发效率和用户体验。

    flexigrid表格插件

    这款经过您修改的flexigrid插件，主要解决了原版的一个问题，即表格列宽调整后位置对齐不准确的问题，这在实际应用中可能会导致用户体验下降。 在原版flexigrid中，可能由于计算误差或浏览器兼容性问题，当用户尝试...

    jQuery特效插件

    1. `jquery.blockUI.js`：这是一个阻止页面元素交互的插件，常用于加载提示或者模态对话框，可以防止用户在处理后台操作时进行其他操作，提高用户体验。 2. `jquery.contextmenu.r2.js`：这个插件实现了右键菜单...

    JQuery table改变列的宽度

    本文将深入探讨如何使用jQuery来改变表格（table）中的列宽，这在构建动态用户界面时非常实用。 首先，让我们理解HTML表格的基本结构。一个表格由`&lt;table&gt;`元素开始，包含若干行`&lt;tr&gt;`（table row），每一行又包含...

    Flexgrid用法

    弹出的div提供了一个编辑界面，用户修改数据后提交更改，同样通过异步请求更新服务器数据。 4. **弹出Div设计** 弹出Div是一种常见的UI设计模式，用于在不离开当前页面的情况下显示额外信息或执行特定操作。在这个...

    整理了12款Javascript 表格控件(DataGrid)

    3. jqGrid：这是一个支持Ajax的jQuery表格插件，提供了分页、添加、编辑、删除和搜索记录的功能，并支持多种数据输入类型。它还集成有子表格和日期选择控件。 4. tableFormSynch：这是一个表格与表单数据同步的...

Magicbox
Global site tag (gtag.js) - Google Analytics