DataGrid( 数据表格) 组件[7]

本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于
Panel(面板)、Resizeable(调整大小)、LinkButton(按钮)、Pageination(分页)组件。
一. 后台交互

//删除记录
$.ajax({
type : ‘POST‘,
url : ‘delete.php‘,
data : {
ids : ids.join(‘,‘),
},
beforeSend : function (jqXHR, settings) {
$(‘#box‘).datagrid(‘loading‘);
},
success : function (data, textStatus, jqXHR) {
if (data) {
$(‘#box‘).datagrid(‘load‘);
$(‘#box‘).datagrid(‘loaded‘);
$(‘#box‘).datagrid(‘unselectAll‘);
$.messager.show({
title : ‘提示‘,

msg : data + ‘个用户被删除成功!‘,
});
}
},
});
//删除 PHP 代码
<?php
require ‘config.php‘;
$ids = $_POST[‘ids‘];
$query = mysql_query("DELETE FROM think_user WHERE id IN ($ids)")
or die(‘SQL 错误!‘);
echo mysql_affected_rows();
mysql_close();
?>
//新增及修改用户
onAfterEdit : function (rowIndex, rowData, changes) {
var inserted = $(‘#box‘).datagrid(‘getChanges‘, ‘inserted‘);
var updated = $(‘#box‘).datagrid(‘getChanges‘, ‘updated‘);
var url = info = ‘‘;
//新增内容
if (inserted.length > 0) {
url = ‘add.php‘;
info = ‘个用户被新增成功!‘;
}
//修改内容
if (updated.length > 0) {
url = ‘update.php‘;
info = ‘个用户被修改成功!‘;
}
$.ajax({
type : ‘POST‘,
url : url,
data : {

row : rowData,
},
beforeSend : function (jqXHR, settings) {
$(‘#box‘).datagrid(‘loading‘);
},
success : function (data, textStatus, jqXHR) {
if (data) {
$(‘#box‘).datagrid(‘load‘);
$(‘#box‘).datagrid(‘loaded‘);
$(‘#box‘).datagrid(‘unselectAll‘);
$.messager.show({
title : ‘提示‘,
msg : data + info,
});
obj.editRow = undefined;
}
},
});
},
//新增服务器代码
<?php
require ‘config.php‘;
$row = $_POST[‘row‘][0];
$user = $row[‘user‘];
$email = $row[‘email‘];
$date = $row[‘date‘];
$query = mysql_query("INSERT INTO think_user (user, email, date)
VALUES (‘$user‘, ‘$email‘ ,‘$date‘)") or die(‘SQL 错误!‘);
echo mysql_affected_rows();
mysql_close();
?>
//修改服务器代码
<?php
require ‘config.php‘;
$row = $_POST[‘row‘][0];

$id = $row[‘id‘];
$user = $row[‘user‘];
$email = $row[‘email‘];
$date = $row[‘date‘];
$query = mysql_query("UPDATE think_user SET
user=‘$user‘,email=‘$email‘,date=‘$date‘ WHERE id=‘$id‘") or die(‘SQL 错
误!‘);
echo mysql_affected_rows();
mysql_close();
?>

时间: 2024-10-22 01:03:13

DataGrid( 数据表格) 组件[7]的相关文章

DataGrid( 数据表格) 组件[3]

本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination(分页)组件. 一. 样式设置 //样式设置$('#box').datagrid({url : 'user.php',title : '用户列表',width : 500,iconCls : 'icon-search',striped : true,nowrap : true,fitColumns :

DataGrid( 数据表格) 组件[2]

本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination(分页)组件. 一.排序功能 //分页和排序$('#box').datagrid({url : 'user.php',width : 500,title : '用户列表',iconCls : 'icon-search',columns : [[{field : 'user',title : '帐号',

DataGrid( 数据表格) 组件[4]

本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination(分页)组件. 一.查询功能 //工具栏设置<div id="tb" style="padding:5px;height:auto"><div style="margin-bottom:5px"><a href="

DataGrid( 数据表格) 组件[9]

本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination(分页)组件.一.剩下的方法多喝事件 + //部分事件onClickRow : function (rowIndex, rowData) {alert('单击一行时触发!');},onClickCell : function (rowIndex, field, value) {alert('单击一个单

DataGrid( 数据表格) 组件[8]

本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination(分页)组件.一.其他功能 //其他功能$('#box').datagrid({width : 300,fitColumns : false,frozenColumns : [[{field : 'id',title : '编号', sortable : true,width : 100,checkb

jQuery_easyUI 合并单元格 (DataGrid 数据表格)

<table id="dg" style="height:350px;z-index:-5555; " class="easyui-datagrid" rownumbers="true" data-options="fitColumns: true, iconCls: 'icon-edit', scrollbarSize:0, multiSort:true, remoteSort:true, paginatio

jQuery Easyui datagrid 数据表格的使用

jQuery Easyui datagrid 数据表格的使用1. 在页面显示表格的位置 提供<table>标签,指定 id 元素2. 在 JS 代码 $("#grid").datagrid({-}); 完成对表格设置表格列定义远程数据加载分页 顶部工具栏 代码效果 原文地址:https://blog.51cto.com/13587708/2420696

向DataGrid数据表格增加查询搜索框

向DataGrid数据表格增加查询搜索框 效果如下: js代码: $(function(){ var dg = $('#dg').datagrid({ url:"${pageContext.request.contextPath}/OfferServlet",//servlet路径 columns:[[ {field:'offerid',title:'商品ID',width:100}, {field:'offername',title:'商品名称',width:100}, {field

JQuery EasyUI 学习——Struts2与EasyUI DataGrid数据表格结合使用显示数据库数据

因为EasyUI DataGrid只要取出后台传过来的一定格式的JSON数据,就可以在前台页面数据表格中,以一定形式显示数据库中的数据.此处,我们使用Struts2框架整合DataGrid,实现数据的显示. 一.页面内容 为了在页面中显示数据库中字段内容,需要定义一个table,通过EasyUI内部设计,自动显示数据,如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF