EXTJS Grid数据显示、翻页、增删改查功能实现

最新推荐文章于 2017-12-14 16:50:23 发布
最新推荐文章于 2017-12-14 16:50:23 发布
阅读量5.1k 收藏 2
点赞数
分类专栏： EXTJS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/amino77/article/details/9382901
版权

效果图：


本功能模块的实现使用了3个文件：

UserManageView.php  

UserManage.js 

UserManageModel.php 

各文件代码如下。

一、UserManageView.php 文件代码--网页布局页面。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>用户管理</title>
<link rel ="Stylesheet" type="text/css" href="/bio/application/ext-3.2.0/resources/css/ext-all.css" />
<script type="text/javascript" src="/bio/application/ext-3.2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/bio/application/ext-3.2.0/ext-all.js"></script>
<script type="text/javascript" src="/bio/application/ext-3.2.0/src/locale/ext-lang-zh_CN.js"></script> 
<script type="text/javascript" src="../js/UserManage.js"></script>
</head>
<body>
<div id='UserGrid'></div>
</body>
</html>

二、UserManage.js 文件代码--EXTJS框架。

//替换图片文件为本地
Ext.BLANK_IMAGE_URL = '/bio/application/ext-3.2.0/resources/images/default/s.gif'; 
Ext.onReady(function() { 
Ext.QuickTips.init();//浮动信息提示
var proxy=new Ext.data.HttpProxy( {url:'../models/UserManageModel.php'});//获取Jason格式数据，后面已给出完整代码
//定义reader
 var reader=new Ext.data.JsonReader(
{
totalProperty: 'totalProperty',   
        root: 'root'  
},[
{name: 'id', mapping: 'id'},
{name: 'username', mapping:'username'},
{name: 'pwd', mapping:'pwd'},
{name: 'role', mapping:'role'},      
{name: 'lastlogin', mapping:'lastlogin'},
{name: 'logintimes', mapping:'logintimes'},
{name: 'remark', mapping:'remark'}
]
);
//定义数据源，构造store 
var store = new Ext.data.Store({ 
proxy: proxy,
reader: reader
}); 
//store.setDefaultSort("id", "DESC"); //设置默认的排序列和方向 
var pageSize=20;
// 加载数据 
store.load({ params: { start: 0, limit: pageSize} });
//定义复选框
var sm=new Ext.grid.CheckboxSelectionModel({singleSelect:true});   //设置复选框只能单选
//定义一个表格面板 
var grid = new Ext.grid.GridPanel({ 
id:'usergrid',//设置标示ID，方便以后引用
title: '用户信息管理', 
renderTo:"UserGrid", //显示表格的地方，与div要一致
store:store,//数据源
height:550,
width:1000,
sm:sm,//复选框
columns:[
   sm,
   new Ext.grid.RowNumberer({header:"序列号",width:50,align:'center'}),//添加一个编号
   {header: "用户编号", width: 100, dataIndex: 'id', sortable: true,align:'center'},
   {header: "用户名", dataIndex: 'username', sortable: true,align:'center'},
   {header: "密码",hidden:true, dataIndex: 'pwd', sortable: true,align:'center'},
   {header: "用户类型", dataIndex: 'role', sortable: true,align:'center'},
   {header: "最后登录时间", dataIndex: 'lastlogin', sortable: true,align:'center'},
   {header: "登录总次数", dataIndex: 'logintimes', sortable: true,align:'center'},
   {header: "备注", hidden:true,dataIndex: 'remark', sortable: true,align:'center'}
],
stripeRows : true,// 加上行条纹
loadMask : true,// 加载数据时遮蔽表格
border : true,// 加上边框
frame : true,// 显示天蓝色圆角框
autoScroll:true,//显示滚动条
// 定制用户界面(UI视图配置) 
viewConfig: { 
forceFit: true //强制适应分布宽度
}, 
//表格顶部的动作或按钮工具栏 
tbar:new Ext.Toolbar({
items:[{
id:'btnAdd',
text:'新增数据',
tooltip:'新增一条数据',
icon: "../images/add.gif", 
      cls: "x-btn-text-icon",
handler:onbtnAdd
},'-',{
id:'btnEdit',
text:'编辑数据',
tooltip:'编辑一条数据',
icon: "../images/edit.gif", 
      cls: "x-btn-text-icon",
handler:onbtnEdit
},'-',{
id:'btnCancel',
text:'删除数据',
tooltip:'删除一条数据',
icon: "../images/delete.gif", 
        cls: "x-btn-text-icon",
handler:onbtnDelete
},'-',//new Ext.Toolbar.Fill(),'-',//充满组件把之后的顶到最右边
'用户名：',{
fieldLabel:'搜索',
xtype:'textfield',
id:'search',
name:'search',
//blankText:'搜索内容不能为空...',
width:200
},
{
id:'btnSearch',
text:'搜索',
tooltip:'搜索数据',
icon: "../images/search.png", 
      cls: "x-btn-text-icon",
handler:onbtnSearch
}
]
}),
// 表格底部的分页工具栏 
bbar:new Ext.PagingToolbar({
pageSize: pageSize, 
store: store, 
displayInfo: true, 
displayMsg: '当前为第{0}条-第{1}条，共{2}条数据', 
emptyMsg: "没有记录"
}), 
}); 

//添加用户数据
function onbtnAdd(){
var addwin=new Ext.Window({
title:'添加用户',
width:400,
height:250,
//minimizable:true,
//maximizable:true
layout:'form',
frame:true,
buttonAlign:'center',
modal:true,//模式窗口，弹出窗口后屏蔽掉其他组建
plain:true,
closeAction:'hide',//window的关闭方式
//resizable:false,//是否可以调整窗口大小，默认true
items:userForm,
buttons:[{
text:'保存',
handler:function(){
if(userForm.form.isValid()){
        Ext.MessageBox.show({
        msg:'保存数据，请稍等...',
        progressText:'保存',
        width:300,
        wait:true,
        waitConfig:{interval:200},
        });
        //使用BasicForm的submit方式进行ajax的异步提交
        userForm.getForm().submit({
        url:'../models/AddUserModel.php',  //新增记录，代码与UserManageModel.php 类似，SQL语句以及返回值的差异，在此略去
        method:'POST',
        success:function(form,action){
        Ext.MessageBox.hide();
        Ext.MessageBox.alert('成功','保存成功!');
        addwin.hide();
        store.load();
        },
        failure:function(form,action){
        Ext.MessageBox.hide();
        Ext.MessageBox.show({
        title:'错误',
        msg:action.result.msg,
        buttons:Ext.Msg.OK
        });
       
        }
        });
       }else{
        Ext.Msg.alert('系统提示','请检查输入是否正确！')
       }
}
},{
text:'取消',
handler:function(){addwin.hide();}
}]
});
addwin.show();
userForm.getForm().reset();//需重复使用window，应先重置
userForm.getForm().findField('id').getEl().dom.readOnly = false;
}
//用户信息表单
    var userForm=new Ext.FormPanel({
    layout:'form',
    labelWidth:150, 
    frame:true, 
    width:350,
    height:180,
    bodyStyle:'margin:5px 5px 5px 5px',
    defaults:{xtype:'textfield',width:150},
    items:[{
    fieldLabel:'用户编号<font color=red>*</font>',
    name:'id',
    allowBlank:false, //不允许为空
    xtype:'numberfield',//只允许输入数字
    },{
    fieldLabel:'用户名<font color=red>*</font>',
    name:'username',
    allowBlank:false, //不允许为空
    },{
    fieldLabel:'密    码<font color=red>*</font>',
    name:'pwd',
    allowBlank:false, //不允许为空
    inputType:'password',
    },{
    xtype:'combo',
    fieldLabel:'用户类型<font color=red>*</font>',
    store:['用户','管理员'],
    name:'role',
    allowBlank:false, //不允许为空
    mode:'local',
    readOnly:false,
    forceSelection:true,
    triggerAction:'all',
    editable:false,
    }]
    });
    
//编辑用户数据
function onbtnEdit(){
    var selectedRecord=grid.getSelectionModel().getSelected();
    if(selectedRecord==null||selectedRecord==undefined){
    Ext.MessageBox.alert('提示','请选择一条记录！');
    }else{
    var editwin=new Ext.Window({
    title:'编辑用户信息',
    frame:true,
    plain:true,
    modal:true,//背景遮罩
    buttonAlign:'center',
    bodyStyle:'padding:4px',
    width:400,
    height:250,
    layout:'form',
    labelwidth:45,
    closeAction:'hide',//window的关闭方式
    items:userForm,
    buttons:[{
    text:'保存',
    id:'btnSave',
    //保存事件
    handler:function(){
        if(userForm.form.isValid()){
            Ext.MessageBox.show({
            msg:'保存数据，请稍等...',
            progressText:'保存',
            width:300,
            wait:true,
            waitConfig:{interval:200},
            //icon:
            });
            //使用BasicForm的submit方式进行ajax的异步提交
            userForm.getForm().submit({
            url:'../models/EditUserModel.php',    //修改记录，代码与UserManageModel.php 类似，SQL语句以及返回值的差异，在此略去
            method:'POST',
            success:function(form,action){
            Ext.MessageBox.hide();
            Ext.MessageBox.alert('成功','保存成功!');
            editwin.hide();
            store.reload();
            },
            failure:function(form,action){
            Ext.MessageBox.hide();
            Ext.MessageBox.show({
            title:'错误',
            msg:'保存失败！',
            buttons:Ext.Msg.OK
            });
            }
            });
           }else{
            Ext.Msg.alert('系统提示','请检查输入是否正确！')
           }
    }//
    },{
//     text:'重置',
//     handler:function(){userForm.getForm().reset();}
//     },{
        text:'取消',
        handler:function(){editwin.hide();}
        }]
    }).show();
    userForm.getForm().loadRecord(selectedRecord);
    userForm.getForm().findField('id').getEl().dom.readOnly = true;
    }
}
//删除用户数据
function onbtnDelete(){
    var selectedRecord=grid.getSelectionModel().getSelected();
    if(selectedRecord==null||selectedRecord==undefined){
    Ext.MessageBox.alert('提示','请选择一条记录！');
    }else{
    Ext.MessageBox.confirm('提示','确定删除这条记录吗?',function(btn){
    if(btn=='yes'){
    Ext.Ajax.request({
    url:'../models/DeleteUserModel.php',  ////删除记录，代码与UserManageModel.php 类似，SQL语句以及返回值的差异，在此略去
    method:'POST',
    params:{id:selectedRecord.data.id},
        success:function(request,options){
    Ext.MessageBox.alert('成功','删除成功!');
    store.reload();
        },
        failure:function(){
        Ext.MessageBox.show({
        title:'错误',
        msg:'删除中有错误发生！',
        });
        }
    });
    }
    });
    }
}


//搜索用户
function onbtnSearch(){
searchValue=Ext.getCmp('search').getValue().trim();//获取搜索框里输入的值（通过id），并去除空格
if(!searchValue){
Ext.MessageBox.alert('提示','搜索框内容不能为空！');
}else{//搜索框内容不为空
Ext.MessageBox.show({
        msg:'正在查询用户信息，请稍等...',
        progressText:'查询',
        width:300,
        wait:true,
        waitConfig:{interval:200},
        });
Ext.Ajax.request({
url:'../models/SearchUserModel.php',    //查询记录，代码与UserManageModel.php 类似，SQL语句以及返回值的差异，在此略去
method:'POST',
params:{searchname:searchValue},
        success:function(request,options){
Ext.MessageBox.hide();//信息提示隐藏
var result=request.responseText;
if(result==0)
{
Ext.MessageBox.alert('提示','没有符合条件的用户！');
}else{
store.filter('username',searchValue);
//Ext.MessageBox.alert('成功','搜索成功!');
}
    },
    failure:function(){
    Ext.MessageBox.hide();
    Ext.MessageBox.show({
    title:'错误',
    msg:'搜索请求失败！',
    });
    }
});
}
}
}); 

三、UserManageModel.php文件代码--读取数据库表中数据转换成jason格式输出给js文件。

<?php 
    //链接数据库
include_once '../libraries/db.php';
$db=new Db();
$conn = $db->mssqlConnetion();
if ($conn === false) {
die ( print_r ( sqlsrv_errors (), true ) );
return NULL;
}else{

 $sql = "select * from bio_User,bio_UserRole where bio_User.User_RoleID=bio_UserRole.UserRole_ID ";      
 $params = array();
$options =  array( "Scrollable" => SQLSRV_CURSOR_KEYSET );
$Stmt = sqlsrv_query( $conn, $sql , $params, $options );

if ($Stmt == false) {
die ( print_r ( sqlsrv_errors (), true ) );
return NULL;
}
else{
$row_count = sqlsrv_num_rows( $Stmt );//记录总条数
$totalCount=0;

//实现翻页功能
//获取记录开始条数和每页条数
$start=isset($_POST['start'])?$_POST['start']:0;
$limit=isset($_POST['limit'])?$_POST['limit']:20;
$end=$start+$limit;
$start=$start+1;//extjs中start从0开始，每次需下移一位，否则会读出重复记录，且必须在上句的下面执行
$sql2="select * from(select *,row_number() over(order by User_ID) as RowNumber from bio_User,bio_UserRole wherebio_User.User_RoleID=bio_UserRole.UserRole_ID)
T where RowNumber between '".$start."' and '".$end."'";
$Stmt = sqlsrv_query( $conn, $sql2 , $params, $options );

  echo '{"totalProperty":"'.$row_count.'","root":';
echo '[';
while($row= sqlsrv_fetch_array ( $Stmt )) {

$id=$row['User_ID'];
$username=$row['User_Name'];
$pwd=$row['User_Pwd'];
$role=$row['UserRole_Name'];
$lastLoginDate=$row['User_LastLoginDate'];
$loginTimes=$row['User_LoginTimes'];
$remark=$row['User_Remark'];
$jsonArr=array('id'=>$id,'username'=>$username,'pwd'=>$pwd,'role'=>$role,'lastlogin'=>$lastLoginDate,'logintimes'=>$loginTimes,'remark'=>$remark);
$jsonStr=json_encode(encodeUTF8($jsonArr));
$totalCount++;
if($totalCount==$row_count){
echo ($jsonStr);
}
else{
echo $jsonStr.',';
}
}
echo ']';
  echo '}';
}
}
//将数组进行UTF-8的转换
 function encodeUTF8($array){
foreach($array as $key=>$value){
if(!is_array($value)){
$array[$key]=mb_convert_encoding($value,"UTF-8","GBK");
}else{
encodeUTF8($array[$key]);
}
}
return $array;
}
sqlsrv_free_stmt($Stmt);
sqlsrv_close($conn);

amino77
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
ExtJS4+Struts2.1的Grid 增删改查
05-29
本文将深入探讨如何使用这两种技术实现Grid的增删改查功能，帮助新手理解ExtJS4与Struts2.1的交互机制。 首先，我们来看ExtJS4中的Grid组件。Grid是ExtJS中用于展示和管理数据的一种视图，它提供了一种灵活且可定制...
Extjs grig 翻页 勾选记录问题
u010442009的专栏
08-08 1381
在工作中前端用的Extjs 其中gridpanel 在多选有选择框的时候，前后翻页后，勾选的数据不保留。 Ext.define("extGridSel", { extend: "Ext.grid.Panel", xtype: "gridSel", selModel: { injectCheckbox: 0, mode: "SIMPLE",
ExtJs
shmily2038的专栏
04-28 743
  在上一个系列当中，我们学习了如何对grid中的内容进行编辑，但是编辑的结果我们并没有保存，这在实际的应用中是没有什么意义的。在有些情况下，除了编辑之外，还要通过grid进行数据的增加和删除，这两个操作也涉及到对于数据的保存。在这个系列里边，我们将学习如何保存数据以及通过grid对数据进行增加和删除。    我们在前边的学习过程中已经知道，grid其实只是显示数据，它通过配置参数store来
Extjs之Grid详细
diweikang的博客
11-13 1099
Grid的展示选中排序选中事件。 附图： 代码： Ext.onReady(function () { var store = Ext.create('Ext.data.Store', { fields: ["cataId", "cataNo", "cataRemark", "cataTitle", "cataObj
写一篇完整的Extjs Grid的简易翻页
键键的专栏
01-24 9163
         转载并修改上一篇学习EXT第五日--Grid组件的简易分页 ，可能有的人还是会在实现的时候遇到一些问题。现在我自己写了一篇关于Extjs Gird简易翻页的完整实现代码。希望对那些在实现中任很困惑的人能起到帮助作用。        这次代码在.net 2003 + sql server 2000 环境下实现的，没有使用json类、存储过程，只是纯粹的数据字符串拼接后在前台显示
ExtJs 4.x 学习小记：Ext.PagingToolbar翻页时查询参数丢失的处理
bdmh的专栏
03-20 8304
界面结构：左侧是分类树结构，右侧是表格，点击左侧类别，根据类别ID，去刷新右侧Grid的记录 当第一次点击左侧分类节点时，因为是通过代码去请求数据，传递参数catalogid，一切正常，处理catalogid以外，ext还会会自动传递start和limit，start为起始索引，limit是每页显示数量，类似如下请求 http://xxxxx/?catalogid=3&start=0&
extJs 简单的增删改查
04-15
在实现增删改查功能时，通常会用到以下几个主要的ExtJS组件： 1. 表格（Grid）：用于展示数据列表，可以与Ext.data.Store关联，自动处理数据的加载、排序、分页等操作。 2. 表单（Form）：用于输入和编辑数据，包含...
ExtJS增删改查
05-08
在"ExtJS增删改查"这个主题中，我们将深入探讨如何利用ExtJS进行CRUD（创建Create、读取Read、更新Update和删除Delete）操作，这是任何数据库驱动的应用程序中的基本功能。 首先，创建（Create）操作通常涉及创建新...
ExtJS6.5.0+SSM表格增删改查+分页
10-22
1.使用ExtJS6.5.0+SSM 2.实现Grid表格的增删改查和分页，数据库使用的是MySql, 3.项目代码和数据脚本齐全 4.Jar齐全，加载即可运行 5.VX：humingxing可随时交流
SSM+Maven+ExtJs 在eclipse中实现的增删改查例子
12-16
这个例子是一个在Eclipse环境中实现的增删改查（CRUD）应用，它结合了Spring、Spring MVC（Spring Web MVC）、MyBatis（原称SSM）以及前端的ExtJs框架。下面将详细介绍这些知识点： 1. **Spring**：Spring是Java...
使用extjs4+servlet对extjs中grid数据进行填并实现增删改查等功能！
12-01
使用extjs4+servlet对extjs中grid数据进行填并实现增删改查等功能！
关于extjs的分页
乐天小葵
06-18 566
s1tore.load({params:{start:0,limit:10}}); 中start，limit这两个参数来进行分页的。start表示开始记录数，limit表示 一页的记录数。当store第一次load的时候，start=0，limit=10；当点击翻页按钮时，store进行load，此时  start=start+pageSize。如果pageSize=10，那么第二页start
Extjs问题 -- grid只能显示一条数据
杜
12-14 2367
问题： 后台返回的数据有多条，分页栏PagingToolbar显示的记录总数也正确，但gridpanel却只显示当前页的最后一条记录。 问题查找： 情况1：.主键重复，字段id都为0，导致extjs无法找到主键，这是extjs的一个bug。 在grid的getStore的load的回调函数中，用getCount到到的是一条数据。也就是服务端返回了多条数据，但是extjs只
Extjs4 grid数据显示和分页
u012256398的专栏
04-04 175
  前台extjs的js代码： Ext.onReady(function () {     Ext.create('Ext.container.Viewport', {         layout: 'border',         width:500,         items: [                      {             region: ...
extJS控件之每页显示N条记录
爱上狮子座的女孩
07-04 3382
  这是一个分页的控件，可以选择每页显示N条记录，就是在分页工具栏里面加个下拉框来选择显示的记录数。这个控件也是我从ext的官方论坛上偷下来的嘿嘿。不说了，代码如下Ext.namespace(Ext.ux.Andrie);/** * @class Ext.ux.Andrie.pPageSize * @extends Ext.PagingToolbar
Extjs grid 分页汇总总记录数，使用Ext.grid.feature.Summary 实现汇总总记录数
只是回忆
03-27 4692
//实现大体思路是后台传到的前台的store默认比每页实际行数多一条汇总总行数。汇总行取此行内的汇总数值，然后将此行隐藏掉不显示Ext.define('Ssq.view.report.StorageStock', { extend : 'Framework.base.ListView', alias : 'widget.storagestock', store : 'StorageStock
extjs翻页控件
yu3000的专栏
02-07 397
http://dev.sencha.com/ext/5.1.0/examples/kitchensink/#progress-bar-pager
Extjs 分页多选的实现
06-15 402
Extjs 版本 6.X 单页面的多选，没有任何问题。 直接使用 Grid的配置项进行绑定即可获取： xtype: 'grid', bind: { selection: '{checkedRecords}' }, 但是如果grid采用分页处理，当我们翻...
extjs6实现跨页勾选
cxhao的博客
06-20 1362
最近公司的Extjs6项目遇到了一个分页勾选的bug，分享一下自己这两天的经验。 话不多说，直接上代码： 下面写得是一个window， /** * 人员选择公共组件，调用时配置以下参数，有什么参数组件就传值给什么组件 * memberNameCmp 名称显示框object * memberIdCmp id存储框object * memberGridCmp grid存储object

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值