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" ...
随机推荐
- linux下PHP7环境搭建
LAMP环境版本 操作系统:Centos 7 Mysql:5.7.11 Apache:2.4.18 PHP:7.0.4 安装Mysql 下载链接:http://dev.mysql.com/ ...
- 网站移植到linux上后常犯的错误
常犯的错误 1:gcc库没装或者没装全 表现:没有可用的C编译器 同类错误:提示g++ not found, 解决:出现以上错误,则是因为gcc编译器没装,或者是没装全. 挂载光盘,到Pakeges里 ...
- logstash 配置文件实例
这个配置文件记不起来是从那个地方下载的来的了,感谢那位无私的朋友 input { beats { #shipper 端用的是 filebeat,所以用这个插件 port ...
- iOS开发小技巧--TableView中headerView的循环利用,以及自定义的headerView
一.首先要搞清楚,tableView中有两种headerView,一个是tableHeaderView,另一个是headerView.前者就一个;后者根据session决定个数 headerView的 ...
- 81B
模拟 字符串必须先清零,要不会出现玄学的问题 #include<iostream> #include<cstdio> using namespace std; string s ...
- java-Date、String、Calendar转化
1.Calendar 转化 String //获取当前时间的具体情况,如年,月,日,week,date,分,秒等 Calendar calendat = Calendar.getInstance(); ...
- 16 IO操作文件读写
IO的分类 第一种分法: 1.输入流 2.输出流 第二种分法: 1.字节流 2.字符流 第三种分法: 1.节点流 2.处理流 I/O当中的核心类: InputStream <--------F ...
- bzoj2200: [Usaco2011 Jan]道路和航线
先忽略航线,求出图中所有连通块,再用航线拓扑排序求出每个连通块的优先级 然后dijkstra时优先处理优先级高的块里的点就行了 ps:这题SPFA会TLE #include <iostream& ...
- perl split 的一种特殊用法
参考 http://blog.chinaunix.net/uid-1919528-id-2792055.html split 函数的正规语法应该是: split /PATTERN/, EXPR 而使用 ...
- 自动存储管理 ASM (转)
文章转自:http://www.itpub.net/thread-1342473-1-1.html 自动存储管理 (ASM) ASM 是 Oracle 数据库 10g 中一个非常出色的新特性,它以平台 ...