easyUI数据表格datagrid之笔记
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之笔记的更多相关文章
- easyUI数据表格datagrid之笔记2
/**========================================= * 追加在表格尾部 */function append(){ editIndex = $('#dg').dat ...
- easyUI 数据表格datagrid的使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- easyUI数据表格datagrid之分页
一.分页函数 /**========================================= * 分页函数 */function pagerFilter(data) { if(typeof ...
- [转载]EasyUI中数据表格DataGrid添加排序功能
我们这里演示的是EasyUI数据表格DataGrid从服务器端排序功能,因为觉的本地数据排序没有多大的作用,一般我们DataGrid不会读取全部数据,只会读取当前页的数据,所以本地数据排序也只是对当前 ...
- easyui框架--基础篇(一)-->数据表格datagrid(php与mysql交互)
前 言 php easyui框架--本篇学习主要是 easyui中的datagrid(数据表格)框架. 本篇学习主要通过讲解一段代码加GIF图片学习datagrid(数据表格)中的一些常用属 ...
- jQuery EasyUI - 数据表格(DataGrid)
由于工作需要,项目使用前端 jQuery EasyUI - DataGrid 来控制数据表格. 1.加载相关js和css,因为easyui依赖jquery,所有加载easyui前要先加载jquery, ...
- Easyui数据表格-地区列表及工具栏增删改
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- 商城项目回顾整理(二)easyUi数据表格使用
后台主页: 商品的数据表格展示 引入用户表数据表格展示 引入日志表数据表格展示 引入订单表数据表格展示 后台主页代码: <%@ page language="java" co ...
- 数据表格 - DataGrid - 查询
toolbar头部工具栏 <script type="text/javascript"> $(function () { $("#datagrid" ...
随机推荐
- android 资讯阅读器(二)
接着上次的博客,上次移植完了tab以后整个app的框架就算是定下来了. 本次目标: 1.数据的获取与展示(ListView) 2.官方的下拉刷新效果(SwipeRefreshLayout) 3.数据接 ...
- Android 强制竖屏
一般android 显示内容都有两种实现方式,java代码中实现,xml布局中实现(或者权限管理页面) 直接上代码: java方法 setRequestedOrientation(ActivityIn ...
- Beta冲刺---Day2
站立式会议 站立式会议内容总结: 221: 昨日完成: 1.这几天的安排,接口测试. 今天要完成: 1.协作编写系负责人审核 遇到问题: 1.无 328: 昨天完成的事情: 1.无 今天要完成的事情: ...
- VMWare虚拟机提供的桥接、nat和主机模式的区别
虚拟机网络模式 无论是vmware,virtual box,virtual pc等虚拟机软件,一般来说,虚拟机有三种网络模式: 1.桥接 2.NAT 3.Host-Only 哪一种网络是适合自己的虚拟 ...
- git 删除和重命名文件
1. 删除文件 git rm a.txt git rm--cached filename 会删除索引中的文件并把它保留在工作目录中 而 git rm 则会将文件从索引和工作目录中都删除 文件删除后的恢 ...
- dede使用方法----实现英文版的搜索功能
搜索功能在网站中是最常见的一个功能了.我们在用dede做双语网站的时候,默认的会有中文版的搜索功能.但是怎么添加一个英文版的搜索功能.各位看官,方法如下: 1.复制plus目录下的serach.php ...
- Java面试题(全)
JAVA部分 什么是反射机制?反射机制应用(Struts中反射机制的应用) 答:运行状态中,对于任意一个类,都可以知道它的所有属性和方法,对于任意一个对象都可以调用它的任意一个方法,这种动态获取信息以 ...
- java代码运行linux shell操作
1.Java调用shell Java语言以其跨平台性和简易性而著称,在Java里面的lang包里(java.lang.Runtime)提供了一个允许Java程序与该程序所运行的环境交互的接口,这就是 ...
- Eclipse配置PyDev插件来实现python开发环境
1.安装python解释器(完成的略过) 2.安装PyDev: 首先需要去Eclipse官网下载:http://www.eclipse.org/,Eclipse需要JDK支持,如果Eclipse无法正 ...
- 77.Android之代码混淆
转载:http://www.jianshu.com/p/7436a1a32891 简介 作为Android开发者,如果你不想开源你的应用,那么在应用发布前,就需要对代码进行混淆处理,从而让我们代码即使 ...