日期: 2012年8月29日

JQuery+JQuery ui实现的弹出窗口+遮罩层+拖动+更改大小～！ 

 

DOM是一种API（应用编程接口）。简单地说，API就是一组已经得到有关各方共同认可的基本约定。在现实世界中，相当于API的例

子包括：摩尔斯码 国际时区 化学元素周期表

DOM定义：一个与系统平台和编程语言无关的接口，程序和脚本可以通过这个接口动态地对文档的内帖、结构和样式进行访问和修改

。

解释性程序设计语言不需要编译器。
函数：函数的作用是定义一次但却可以调用多次或执行任意多次的代码。
需要重复执行的东西我们就可以把它写成函数。

1<div class="txt">
      <label for="name">表名:</label>
      <input class="easyui-validatebox" type="text" disabled="true" name="table" >
      </input>
    </div> 禁止修改
2、
<script type="text/javascript">
var task_id = request("task_id");
if(task_id){
    $('#ff').form('load','http://admin.php/Topwords/taskinfo?task_id='+task_id);
}
</script>
修改页面 加载原有数据

修改页面，里面的状态
<div class="txt">
      <label for="language">状态:</label>
      <select class="easyui-combobox" name="status" style="width: 140px;"  editable="false" required="true">
        <option value="1">开启</option>
        <option value="0">关闭</option>
      </select>
    </div>

3、状态修改，把数据里面的1 0 变成 关闭和开启

================================================
formatter:function (value) {
if(value == 1){
return '开启';
} else {return '关闭';
}
}

单元格的格式化函数，需要三个参数： 
value： 字段的值。
rowData： 行的记录数据。
rowIndex： 行的索引。
=====================================================
var status = ['关闭','开启'];
var types = ['定时', '实时'];

columns: [[
                    { field: 'task_id', title: '任务id', width: 80 },
                    { field: 'detail', title: '描述', width: 350 },
                    { field: 'type', title: '类型', width: 150 ,
                        formatter:function (value) {
                            return types[value];
                        }
                    },
                    { field: 'status', title: '状态', width: 60,align:'center',
                        formatter:function (value) {
                            return status[value];
                        }
                    },
                    { field: 'lastrun', title: '上次执行时间', width: 250 },
                    { field: 'nextrun', title: '下次执行时间', width: 250 },
                    { field: 'url', title: '抓取页面的url', width: 150 }

                ]],
=======================================
/搜索/
function qq(value,name){
            alert(value+":"+name)
        };

<input id="ss" class="easyui-searchbox"
            searcher="qq"
            prompt="请输入查询类型" menu="#mm" style="width:300px"></input>
            
    <div id="mm" style="width:120px">
        <div name="all" iconCls="icon-ok">全部数据</div>
        <div name="keywords">关键词</div>
        <div name="tag_name">标签</div>
        <div name="topwords">热词</div>
    </div>
    
================================================
确认领取
function receive(){
    var rows = grid.datagrid('getSelections');
    var num = rows.length;
    if (num == 0) {
        Msgslide('请选择一条记录进行操作!'); //$.messager.alert('提示', '请选择一条记录进行操作!', 'info');
        return;
    }
    else if (num &
gt; 1) {
        Msgfade('您选择了多条记录,只能选择一条记录进行修改!'); //$.messager.alert('提示', '您选择了多条记录,只能选

择一条记录进行修改!', 'info');
        return;
    }
    else {
        receiveWin.dialog('open');
        $("#userId").val(rows[0].empid);
        $("#oids").val(rows[0].oid);
        receiveForm.url = '/controler/Order.ashx';
    }
}
 =======================================
分页
pageNumber:1
 number
 当设置了 pagination 特性时，初始化页码。第一页
 1
 
pageSize:30
 number
 当设置了 pagination 特性时，初始化页码尺寸。每页30条
pageSize:20,

 10
                pageSize:20,
                pageNumber:1,
                fit:true,
                fitColumns: true,
                pagination: true,
                    rownumbers: true,
 ===============================
遗留问题：综合条件组合条件的查询

http://www.jz123.cn/text/0718524.html

多个参数传值
================================================
var params = "param1=value1&param2=values";
或者是var params ={param1:value1,param2:value2};

====================================================
会话超时 登录验证 禁止访问内页
$(function(){
    $.ajax({
        type: "get",
        dataType: "json",
        url: "http://Public/checkLogin",
        data: "action=profile",
        complete :function(){
        },
        success: function(dat){
            result = $.parseJSON(dat);
            if(result.error == '1000'){
                $.cookie('uid', '');
                $.cookie('username', '');
                alert("请先登录！");
                location = '/login.html';
            }else{
                if(result.error == "1000"){
                    $.cookie('uid', '');
                    $.cookie('username', '');
                    alert("会话超时，请先登录！");
                    location = '/login.html';
                }else{
                    $.cookie('uid',result.uid);
                    $.cookie('username',result.username);
                }    
            }
        }
    });
});

————————-
function loaddata1(){//登陆
    $('#login').form('submit',{
        ,
        onSubmit:function(){
            return $(this).form('validate');
        },
        success:function(dat){
            result = $.parseJSON(dat);
            if(result.error == "1"){
                alert("欢迎"+result.username+"回来，登陆成功！");
                location = 'User/index.html';
            }else if(result.error == "1000"){
                alert("没有登录!");
            }else if(result.error == "1001"){
                alert("用户名不能为空!");
            }else if(result.error == "1002"){
                alert("密码不能为空!");
            }else if(result.error == "1003"){
                alert("验证码不能为空!");
            }else if(result.error == "1004"){
                alert("验证码错误!");
            }else if(result.error&n
bsp;== "1005"){
                alert("用户名或密码错误!");
            }
        }
    });
}
=========================================================
var task_id = request("task_id");
function addProduct(){
    $('#ff').form('submit', {
        ,
        onSubmit: function(){
            if(task_id){
                $("#key").val("update");
                $("#task_id").val(task_id);
            }else{
                $("#key").val("add");
            }
            return $(this).form('validate');
        },
        success:function(data){
            eval('data=' + data);
            if (data.error=="1") {
                $.messager.confirm('提示信息', '完成');
            }else{
                $.messager.alert('错误', '修改失败', 'error');
            }
        }
    });
}
===================================
传输值
alert(rows[0].key_words);
        addTab("编辑窗口 – "+rows[0].key_words, "SearchDataTop1.html?task_id="+task_id+'&key_words='+rows

[0].key_words);

取得值
var task_id = request("task_id");
var topwords= request("topwords");

=============================================
function getLocalTime(nS) {
    return new Date(parseInt(nS) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " "); 
}

时间格式转换
{field:'add_time',title:'时间',width:120,
                        formatter:function (value) {
                            return getLocalTime(value);
                        }
                    }
                    
==========================================
var receiveWin;
var receiveForm;

function getSelectedArr() {
    var ids = [];
    var rows = grid.datagrid('getSelections');
    for (var i = 0; i < rows.length; i++) {
        ids.push(rows[i].task_id);
    }
    return ids;
}
function getSelectedID() {
    var ids = getSelectedArr();
    return ids.join(',');
}
function arr2str(arr) {
    return arr.join(',');
}
function OrderView() {
    var rows = grid.datagrid('getSelections');
    var num = rows.length;
    if (num == 0) {
        Msgslide('请选择一条记录进行操作!');
                return;
    }
    else if (num > 1) {
        Msgfade('您选择了多条记录,只能选择一条记录进行修改!');
        return;
    }
=====================================================
<input class="easyui-combobox" 
   id="cc" 
   name="mallId" 
   url="${ctx}/record/mallin!getMall.action" 
   valueField="id" 
   textField="name" 
   multiple="true"  
   panelHeight="auto" 
   /></td> 

name：用来和后台绑定， 

url：异步json从后台的方法中获得json数据， 

valueField：选取文字后对应的值 

textField：显示的文字 

multiple="true"：允许在下拉列表里多选 

提交到后台会变成一个名字为mallId的Long型数组， 

多选提交值
$('#多选selectid').combotree('getText')

$('#tag_id').combobox('getValues');
==============================================

jquery easyUI combobox赋值

Js代码  1. <input class="easyui-combobox"   
2.   id="cc"  
3.   name="mallId"  
4.   url="${ctx}/record/mallin!getMall.action"   
5.   valueField="id"   
6.   textField="name"   
7.   multiple="true"    
8.   panelHeight="auto"  
9.   /></td>  
 <input class="easyui-combobox" 
   id="cc"
   name="mallId"
   url="${ctx}/record/mallin!getMall.action" 
   valueField="id" 
   textField="name" 
   multiple="true"  
   panelHeight="auto
"
   /></td>
 

name：用来和后台绑定，

url：异步json从后台的方法中获得json数据，

valueField：选取文字后对应的值

textField：显示的文字

multiple="true"：允许在下拉列表里多选

 

多选提交到后台会变成一个名字为mallId的Long型数组，

后台返回到前台时，给combobox赋值，代码如下：

导入c标签：<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

 

Js代码  1.var i = 0;  
2.var t = [];  
3.<c:forEach items="${mallId}" var="u">  
4.  t[i] = ${u};  
5.  i++;   
6. </c:forEach>  
7.$(&apos;#cc&apos;).combobox(&apos;setValues&apos;,t);  
              var i = 0;
    var t = [];
    <c:forEach items="${mallId}" var="u">
      t[i] = ${u};
      i++; 
     </c:forEach>
    $(&apos;#cc&apos;).combobox(&apos;setValues&apos;,t); 这是给combobox赋很多值，

 赋单个值是用：$(&apos;#cc&apos;).combobox(&apos;setValue&apos;,‘1’);

==================================================================
调试总结
出现在所有js反应里面。
出现的是返回的页面，不是data页面get

主要是因为tag_id 写错成了task_id的原因
var tag_id = request("tag_id")

删除
function del() {
    var arr = getSelectedArr();
    if (arr.length > 0) {
        $.messager.confirm('提示信息', '您确认要删除吗?', function (data) {
            if (data) {
                $.ajax({
                    url: 'http://weibo.ayohome.com/admin.php/Data/tagDelete?tag_id='+arr2str(arr),
                    type: 'GET',
                    timeout: 1000,
                    error: function () {
                        $.messager.alert('错误', '删除失败!', 'error');
                    },
                    success: function (data) {
                        eval('data=' + data);
                        if (data.error == "1") {
                            grid.datagrid('reload');
                            grid.datagrid('clearSelections');
                        } else {
                            $.messager.alert('错误', '删除失败!', 'error');
                        }
                    }
                });
            }
        });
    } else {
        Msgshow('请先选择要删除的记录。');
    }
}

function getSelectedArr() {
    var ids = [];
    var rows = grid.datagrid('getSelections');
    for (var i = 0; i < rows.length; i++) {
        ids.push(rows[i].tag_id);
    }
    return ids;
}

function arr2str(arr) {
    return arr.join(',');
}
============================

双击弹出窗口

双击跳出tab窗口
onDblClickRow:function(rowIndex, rowData){
     var task_id = request("task_id");
     addTab("查看窗口 – "+rowData.weibo_username,"SearchDataInfo.html?

task_id="+task_id+"&keywords_id="+rowData.keywords_id,"icon-nav");},

=====================================

/**  

  * 指定位置显示$.messager.show  

  * options $.messager.show的options  

  * param = {left,top,right,bottom}  

  */ 

 $.extend($.messager, {  

     showBySite : function(options,param) {  

         var site = $.extend( {  

             left : "",  

             top : "",  

             right : 0,  

             bottom : -document.body.scrollTop  

                     – document.documentEl
ement.scrollTop  

         }, param || {});  

         var win = $("body > div .messager-body");  

         if(win.length<=0)  

             $.messager.show(options);  

         win = $("body > div .messager-body");  

         win.window("window").css( {  

             left : site.left,  

             top : site.top,  

             right : site.right,  

             zIndex : $.fn.window.defaults.zIndex++,  

             bottom : site.bottom  

         });  

     }  

 }); 
 

使用示例：

view sourceprint?
 <a href="#" class="easyui-linkbutton" onclick="showBySite(event)">help</a> 
view sourceprint?01 function showBySite(event){  

     var element = document.elementFromPoint(event.x,event.y);//获取点击对象  

     $.messager.showBySite({  

         title:'My Title',  

         msg:'Message.',  

        showType:'show' 

     },{  

         top : $(element).position().top+$(element).height(),//将$.messager.show的top设置为点击对象之下  

         left : $(element).position().left,//将$.messager.show的left设置为与点击对象对齐  

         bottom : "" 

     });  

 }

在easyui中的1496行
.window-shadow{
 position:absolute;
 background:#ddd;
 border-radius:5px;
 -moz-border-radius:5px;
 -webkit-border-radius: 5px;
 -moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
 -webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
 filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=2,MakeShadow=false,ShadowOpacity=0.2);
}
修改样式

 

 =======================

已存在标签选择

<label for="language">类型:</label>
            <input class="easyui-combobox"style="width:220px"  
            name="task_id" 
            id="task_id" 
            url="/admin.php/Topwords/taskList?group=key&way=select" 
            valueField="task_id" 
            textField="detail" 
            mode="remote" 
            panelHeight="auto"/>