easyUI数据表格datagrid之笔记

时间:2021-11-11 03:28:24

1.用ajax获取数据库数据

/**=========================================
* 读取数据库信息,使用ajax的load方法
*/
function getMediaInfo(){
var orgInfo=[];

$.ajax({
url:baseCtx+"/media/getMediaInfo.action",
data:{},
type : 'post',
async : false,
dataType : "json",
success: function(data){
orgInfo=data;
// console.log("orgInfo="+orgInfo);
$('#dg').datagrid('loadData', orgInfo);
},
});
}

2.查询数据库信息,

/**=========================================
*查询数据库信息,传到服务端
*/
function searchButton() {

var mediaId="";
var mediaName="";
var mediaDomain="";
var mediaType="";
if($('#mediaId').textbox('getText') != null && $('#mediaId').textbox('getText') != "") {
mediaId = $('#mediaId').textbox('getText');
}
if($('#mediaName').textbox('getText') != null && $('#mediaName').textbox('getText') != "") {
mediaName = $('#mediaName').textbox('getText');
}
if($('#mediaDomain').textbox('getText') != null && $('#mediaDomain').textbox('getText') != "") {
mediaDomain = $('#mediaDomain').textbox('getText');
}
if($('#mediaType').textbox('getText') != null && $('#mediaType').textbox('getText') != "") {
mediaType = $('#mediaType').textbox('getText');
}

//查询数据
if(mediaId=="" && mediaName==""&& mediaDomain=="")
alert("请输入要查询的媒体数据!");
else
{
$.ajax({
url:baseCtx+"/media/searchMediaInfo.action",
data:{
//MEDIA_ID和mediaId分别指的是什么
MEDIA_ID:mediaId,
MEDIA_NAME:mediaName,
MEDIA_DOMAIN:mediaDomain,
MEDIA_TYPE:mediaType,

},
type : 'post',
async : true,
dataType : "json",
error: function(){ //失败
alert("loading error!");
},
success: function(data){
var currData = "";
$.each(data,function(index,item){
currData="媒体ID是:"+item.MEDIA_ID+"\n媒体名是:"+item.MEDIA_NAME+
"\n媒体网址:"+item.MEDIA_DOMAIN+"\n媒体类型是:"+item.MEDIA_TYPE;
});
if(currData)
{
alert("查询成功!\n"+currData);

}
else
{
alert("查询失败!\n"+currData);
}

},
});
}
}

3.添加媒体的窗口确认信息,传到服务端

/**=========================================
*添加媒体的窗口确认信息,传到服务端
*/
function win_confirm(){

var media_id = $('#media_id').textbox('getValue');
var media_name = $('#media_name').textbox('getValue');
var media_domain = $('#media_domain').textbox('getValue');
var media_type = $('#media_type').textbox('getValue');

$('#win1').window('close');
//要向数据库中添加一条信息,然后更新

$.ajax({
url:baseCtx+"/media/addMediaInfo.action",
data:{
MEDIA_ID:media_id,
MEDIA_NAME:media_name,
MEDIA_DOMAIN:media_domain,
MEDIA_TYPE:media_type,
},
type : 'post',
async : true,
dataType : "text",
success: function(data){
if(data=="SUCCESS")
{
getMediaInfo();
}
},
});
}

4.编辑媒体的窗口确认信息,传到服务端
/**=========================================
*编辑媒体的窗口确认信息,传到服务端
*/
function editButton() {
$('#win2').window('open');
//清空
$('#media_id2').textbox('setValue',$('#dg').datagrid('getSelected').MEDIA_ID);
$('#media_name2').textbox('setValue',$('#dg').datagrid('getSelected').MEDIA_NAME);
$('#media_domain2').textbox('setValue',$('#dg').datagrid('getSelected').MEDIA_DOMAIN);
$('#media_type2').textbox('setValue',$('#dg').datagrid('getSelected').MEDIA_TYPE);
}

/**=========================================
*窗口确认信息,传到服务端用于修改更新数据库
*/
function win2_confirm()
{
var media_id = $('#media_id2').textbox('getValue');
var media_name = $('#media_name2').textbox('getValue');
var media_domain = $('#media_domain2').textbox('getValue');
var media_type = $('#media_type2').textbox('getValue');

$('#win2').window('close');
//要向数据库中添加一条信息,然后更新

$.ajax({
url:baseCtx+"/media/editMediaInfo.action",
data:{
MEDIA_ID:media_id,
MEDIA_NAME:media_name,
MEDIA_DOMAIN:media_domain,
MEDIA_TYPE:media_type,
},
type : 'post',
async : true,
dataType : "text",
success: function(data){
if(data=="SUCCESS"){
getMediaInfo();
}
},
});
}

5.删除信息
/**=========================================
*删除一条信息
*/
function removeButton() {

if($('#dg').datagrid('getSelected')) {
var mediaName =$('#dg').datagrid('getSelected').MEDIA_NAME;
$.messager.confirm('确认', '您确认想要删除'+mediaName+'吗?', function(r) {
if(r)
{
$.ajax({
url:baseCtx+"/media/removeMediaInfo.action",
data:{MEDIA_NAME:mediaName,},
type : 'post',
async : true,
dataType : "text",
success: function(data){
if(data=="SUCCESS")
{
getMediaInfo();
}},

});
}
});
}
else
{alert("请选择要删除的对象!");}

}

easyUI数据表格datagrid之笔记的更多相关文章

  1. easyUI数据表格datagrid之笔记2

    /**========================================= * 追加在表格尾部 */function append(){ editIndex = $('#dg').dat ...

  2. easyUI 数据表格datagrid的使用

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. easyUI数据表格datagrid之分页

    一.分页函数 /**========================================= * 分页函数 */function pagerFilter(data) { if(typeof ...

  4. &lbrack;转载&rsqb;EasyUI中数据表格DataGrid添加排序功能

    我们这里演示的是EasyUI数据表格DataGrid从服务器端排序功能,因为觉的本地数据排序没有多大的作用,一般我们DataGrid不会读取全部数据,只会读取当前页的数据,所以本地数据排序也只是对当前 ...

  5. easyui框架--基础篇(一)--&gt&semi;数据表格datagrid(php与mysql交互)

      前  言  php  easyui框架--本篇学习主要是 easyui中的datagrid(数据表格)框架. 本篇学习主要通过讲解一段代码加GIF图片学习datagrid(数据表格)中的一些常用属 ...

  6. jQuery EasyUI - 数据表格(DataGrid)

    由于工作需要,项目使用前端 jQuery EasyUI - DataGrid 来控制数据表格. 1.加载相关js和css,因为easyui依赖jquery,所有加载easyui前要先加载jquery, ...

  7. Easyui数据表格-地区列表及工具栏增删改

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  8. 商城项目回顾整理(二)easyUi数据表格使用

    后台主页: 商品的数据表格展示 引入用户表数据表格展示 引入日志表数据表格展示 引入订单表数据表格展示 后台主页代码: <%@ page language="java" co ...

  9. 数据表格 - DataGrid - 查询

    toolbar头部工具栏 <script type="text/javascript"> $(function () { $("#datagrid" ...

随机推荐

  1. &lpar;十三&rpar;Packet socket 和 sockaddr&lowbar;ll

    描述        本文简单描述了数据链路层的socket使用的两种方法正文     Linux下有两种方式接收数据链路层的数据包:    (1)原始的方法,即创建一个类型为SOCK_PACKET的s ...

  2. 更新AD对象属性值

    1. 对于Set-ADUser不包含的对象属性,可以采用replace来操作 Set-ADUser -Identity 'UserA' -Replace @{userWorkstations = 'C ...

  3. nyoj 68 三点顺序

    点击打开链接 三点顺序 时间限制:1000 ms  |  内存限制:65535 KB 难度:3 描述 现在给你不共线的三个点A,B,C的坐标,它们一定能组成一个三角形,现在让你判断A,B,C是顺时针给 ...

  4. linux网络体系架构

    原创kylin_zeng:http://blog.csdn.net/kylin_fire_zeng  本文参考国嵌视频教程,再此感谢国嵌教育. 一.协议栈层次对比: 1)网络接口层把数据链路层和物理层 ...

  5. chrome &quot&semi;Provisional headers are shown&quot&semi;

    我的问题的,每次打开浏览器,点开有视频的页面(云平台的存储),然后当视频还没有加载完,就马上关闭,连续操作很多次(测试的暴力测试把),F12查看就有很多很多在加载中的连接,因为连续点击太多次了,第一个 ...

  6. 【转】简单理解Vue中的nextTick

    前言: Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick ...

  7. classList用法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. fastcgi&lowbar;next&lowbar;upstream error timeout invalid&lowbar;header http&lowbar;500 http&lowbar;503(转)

    location / proxy_pass http://nodelist; fastcgi_next_upstream error timeout invalid_header http_500 h ...

  9. idea编辑器无法识别jdk

    File-->Invalidate Caches / Restart...-->Invalidate and Restart 然后就可以了

  10. 【Oracle】在win10上安装Oracle客户端报错:&lbrack;INS-13001&rsqb;环境不满足最低要求

    环境:win10 64bit 客户端工具: 安装的时候报错: 解决方案: 在\client\stage\cvu目录下找到如下两个文件: 编辑这两个文件,在文件中分别添加如下内容 <OPERATI ...