EasyUi – 6.easyui常见问题

红太狼 2022-03-31 03:14 272阅读 0赞

1.进度条

2.JQuery EasyUI弹出对话框解决Asp.net服务器控件无法执行后台代码的方法

3. 三张表的连接查询现在到datagrid里

4.日期组合框DateBox设置readonly的解决方法

## 1.进度条 ##

//数据更新
                $('#A3').click(function () {
                                    
                    $.messager.progress({
                        title:

'请稍后' , msg: '页面加载中...'

});
                    
                    $.post("Update.ashx", $("#EditForm").form().serialize(),
                                         function (msg) {
                                             
                                             //alert(msg);
                                             if (msg != 0) {
      
    
                                                 //刷新当前页reload
                                                 _datagrid.datagrid('reload', {
                                                     DeviceNumber: '',
                                                 });
                                                 $.messager.show({
                                                     title: '提示',
                                                     msg: "更新" + msg + "条数据！",
                                                     showType: 'show'
                                                 });
                                                 setTimeout(function

() \{ $.messager.progress('close' ); \}, 100

);
                                             } else {
    
                                                 $.messager.show({
                                                     title: '提示',
                                                     msg: "没有更新！",
                                                     showType: 'show'
                                                 });
                                                 setTimeout(function

() \{ $.messager.progress('close' ); \}, 100

);
                                             }
    
    
                                         }, 'json');

![image][]

## 2.JQuery EasyUI弹出对话框解决Asp.net服务器控件无法执行后台代码的方法 ##

var dlg = $('#dd').dialog({
                    title: '导入excel,请选择..',
                    width: 400,
                    height: 150,
                    closed: true,
                    cache: false,
                    modal: true,
                    //href: '../UpLoad.aspx'
                });
                //在点击按钮打开Dialog时，将div append到form里，使按钮生效。 
                dlg.parent().appendTo(jQuery("#form1"));
                
                //导入excel
                $('#A2').click(function () {
                    dlg.dialog('open');
                   
                    //console.info(dlg.parent());
                });

html

解决方法：在点击按钮打开Dialog时，将div append到form里，使按钮生效。

将弹出div append到属于form里的div，那么服务器端控件就可以正常执行

## 3. 三张表的连接查询现在到datagrid里 ##

3.1 存储过程：

------------------------------------
    --用途：查询PKE_DeviceContent与PKE_Franchiser还有PKE_DeviceNumber的3张表的连接查询
    --项目名称：
    --说明：查询PKE_DeviceContent多余的数据
    --时间：2013-09-08 20:11:23
    ------------------------------------
    ALTER PROCEDURE [dbo].[PKE_DeviceContent_Select]
    @GetOne nvarchar(50)
     AS 
        select a.ConID,a.DeviceNumber,a.longitude,a.latitude,a.AlarmStatus,a.uploadtime,
    a.vehicleState,a.PositionStatus,a.BeginTime,a.EndTime,a.Adderss,b.FranchiserName,c.Remark from 
     PKE_DeviceNumber b
    inner join dbo.PKE_Franchiser c
    on 
     c.FranchiserName=b.FranchiserName
     inner join PKE_DeviceContent a
     on 
     a.DeviceNumber=b.DeviceNumber
     where a.DeviceNumber like '%'+@GetOne+'%'

![image][image 1]

3.2 页面

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PKE_DeviceContent.aspx.cs" Inherits="Easyui.Web.PKE_DeviceContent.PKE_DeviceContent" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>设备列表</title>
        <script src="../Scripts/jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script>
        <script src="../Scripts/jquery-easyui-1.3.2/jquery.easyui.min.js"></script>
        <link href="../Scripts/jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet">
        <link href="../Scripts/jquery-easyui-1.3.2/themes/icon.css" rel="stylesheet" />
        <script src="../Scripts/jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js"></script>
        <script src="../Scripts/date.js"></script>
        <link href="../css/cxlb.css" rel="stylesheet" />
         <script type="text/javascript">
             var LoginInputForm;
             var _datagrid;
             $(function () {
                 _datagrid = $('#datagrid').datagrid({
                     //传递额外的参数
                     queryParams: {
                         GetOneID: '',
                         PassWord: '',
                     },
                     url: 'PKE_DeviceContent.ashx',
                     rownumbers: true,//显示行号
                     idField: '设备号',//支持翻页后（记忆）——例：跨页删除
                     //fitColumns: true,//设置为true将自动使列适应表格宽度以防止出现水平滚动。
                     pagination: true,
                     nowarp: false, //内容换行：false（换） true（不换）
                     //fit:true, //自适应
                     pageSize: 10,
                     loadMsg: "努力加载中...",
                     singleSelect: true,
                     pageList: [10, 20, 30],
                     //toolbar: [{
         
                     //    text: '新增',
                     //    iconCls: 'icon-add',
    
                     //}, '-', {
         
                     //    text: '修改',
                     //    iconCls: 'icon-edit',
                     //}, '-', {
         
                     //    text: '删除',
                     //    iconCls: 'icon-remove',
                     //}, '-', {
         
                     //    text: '取消多选',
                     //    iconCls: 'icon-redo',
                     //}
                     //],
                     columns: [[
                         { field: 'ConID', title: '序列号', width: 100 },
                         { field: 'Remark', title: '客服', width: 150 },
                         {
                             field: 'DeviceNumber',
                             title: '设备号',
                             width: 100,
                         },
                         { field: 'AlarmStatus', title: '报警状态', width: 150 },
                         { field: 'vehicleState', title: '车辆状态', width: 150 },
                         { field: 'PositionStatus', title: '定位状态', width: 150 },
                         { field: 'uploadtime', title: '上传时间', width: 150 },
                         { field: 'BeginTime', title: '开通时间', width: 150 },
                         { field: 'EndTime', title: '到期时间', width: 150 },
                         {
                             field: 'Adderss', title: '操作', width: 100,
                             formatter: function (value, row, index) {
                                 return '<a style="cursor:pointer;" οnclick="show(' + index + ')">详细</a>';
                             }
                         }
                     ]],
                     loadFilter: function (data) {
                         //console.info(data.rows);
                         if (data.rows=="004") {
                             $.messager.alert('Warning', '您的权限已经过期！\n 请重新登录！！');
                         } else {
                             return data;
                         }
                     }
                 });
    
    
                 //查询
                 $('#btn').click(function () {
                     _datagrid.datagrid('load', {
                         GetOneID: $('#cx_lb').find("[name='username']").val(),
                         //PassWord: $('#cx_lb').find("[name='PassWord']").val(),
                     });
                 });
    
                 //清空
                 $('#A1').click(function () {
                     _datagrid.datagrid('load', {
                         GetOneID: '',
                     });
                     $('#cx_lb').find('input').val('');
                 });
    
                 $.extend($.fn.validatebox.defaults.rules, {
                     minLength: {
                         validator: function (value, param) {
                             return value.length >= param[0];
                         },
                         message: 'Please enter at least {0} characters.'
                     }
                 });
    
             });
    
    
             function show(i) {
                 var row = _datagrid.datagrid('getRows');
                 console.info(row[i]);
                 $(".pageFormContent").dialog({
                     title: '详细记录',
                     closable: true,
                     modal: true,
                     buttons: [{
                         text: '添加',
                         iconCls: 'icon-ok',
                         handler: function () {
                             //***先验证（根据自己的需求）
                             //if (LoginInputForm.form('validate')) {
         
                             //1.表单form提交
                             //LoginInputForm.submit();
    
                             //2.ajax提交
                             $.ajax({
                                 type: "POST",
                                 url: "Add.ashx",
                                 dataType: "json",
                                 data: $('#LoginInputForm').form().serialize(),
    
                                 success: function (msg) {
                                     //alert(msg);
                                     if (msg == "1") {
                                         $("#LoginAndRegDialog").dialog("close");
                                         _datagrid.datagrid('load', {
                                             UserName: '',
                                         });
                                         $.messager.show({
                                             title: '提示',
                                             msg: "添加成功！"
                                         });
                                     } else if (msg == "0") {
                                         //alert($("#LoginInputForm input[name='name']").val());
                                         $.messager.show({
                                             title: '提示',
                                             msg: "账号【" + $("#LoginInputForm input[name='name']").val() + "】已经存在，请重新填写！"
                                         });
                                     }
    
                                 }
                             });
                             //}
                         }
                     }]
                 });
             }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
                </form>
            <div class="easyui-layout" fit="true">
            <div data-options="region:'north',title:'查询列表',split:true" class="datagrid-toolbar" style="height: 75px;">
                <form id="cx_lb">
                    <table class="cx_lb_table">
                        <tr>
                            <th>设备号：</th>
                            <td width="200">
                                <input type="text" name="username" /></td>
                            <td>
                                <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a>
                            </td>
                            <td>
                                <a id="A1" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-reload'">清空</a>
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
            <div data-options="region:'center',title:'本地设备列表'" style="padding: 5px; background: #eee;">
                <table id="datagrid"></table>
            </div>
    
        </div>
    
    </body>
    </html>

![image][image 2]

3.3 一般处理程序PKE\_DeviceContent.ashx

using System;
    using System.Collections;
    using System.Collections.Generic;
    using System.Data;
    using System.Data.SqlClient;
    using System.Linq;
    using System.Web;
    using System.Web.SessionState;
    using Newtonsoft.Json.Linq;
    
    namespace Easyui.Web.PKE_DeviceContent
    {
        /// <summary>
        /// PKE_DeviceContent1 的摘要说明
        /// </summary>
        public class PKE_DeviceContent1 : IHttpHandler, IRequiresSessionState
        {
            private HttpRequest Request;
            private DataSet ds;
            private string json;
    
            public void ProcessRequest(HttpContext context)
            {
    
    
                Request = context.Request;
                int rows = int.Parse(Request["rows"]);
                int page = int.Parse(Request["page"]);
                string getOne = Request["GetOneID"];
                //session 账号
                //string username = Convert.ToString(context.Session["username"]);
                string username = "tangge";
                //验证账号
                //if (string.IsNullOrEmpty(username))
                //{
                //    context.Response.Write("{\"rows\":\"004\"}");
                //}
                //else
                //{
         
                    context.Response.ContentType = "text/html";
                    SqlParameter[] parameters =
                        {
                            new SqlParameter("@GetOne", SqlDbType.VarChar, 255),
                        };
                    parameters[0].Value = getOne;
    
                    DataSet ds = DBUtility.DbHelperSQL.RunProcedure("PKE_DeviceContent_Select", parameters,
                                                                    "PKE_DeviceContent");
    
                    json = DBUtility.JsonConvert.DatasetToJson(ds);
    
                    JObject jObj = JObject.Parse(json);
                    JToken ageToken = jObj["total"];
                    int total = int.Parse(ageToken.ToString());
    
                    //转化为Jarray
                    JArray jconte = (JArray) jObj["rows"];
    
    
                    //names：返回所有Remark（客服姓名）
                    //var names = from staff in jObj["rows"].Children()
                    //            select (string)staff["Remark"];
                    var remark = jObj.SelectToken("rows").Select(p => p["Remark"]).ToList();
                    ;
    
                    //设置行数：相当于total(如：客服tangge,数量5个，cou就等于5)
                    int cou = 0;
                    //设置内容：把(remark[y].ToString() == username)的remark添加进去
                    ArrayList contelist = new ArrayList();
    
    
    
    
    
                    for (int y = 0; y < remark.Count; y++)
                    {
                        if (remark[y].ToString() == username)
                        {
                            cou++;
                            contelist.Add(((remark[y].Parent)).Parent);
                        }
                    }
    
                    ArrayList list = new ArrayList();
    
                    string tt = null;
                    //如果page是第1页and总数小于行数（例：总数4，行数10）
                    if (page == 1 && cou <= rows)
                    {
                        //根据前台 rows 得到 content
                        for (int i = 0; i < rows - (rows - cou); i++)
                        {
                            list.Add(contelist[i]);
                        }
    
                        foreach (var cc in list)
                        {
                            tt += cc + ",";
                        }
                    } //page是第1页 and 总数大于行数（例：总数11，行数10）
                    else if (page == 1 && cou > rows)
                    {
                        //根据前台 rows 得到 content   
                        for (int i = 0; i < rows; i++)
                        {
                            list.Add(contelist[i]);
                        }
    
                        foreach (var cc in list)
                        {
                            tt += cc + ",";
                        }
                    }
                        //page不等于1 and 总数大于行数
                    else if (page != 1 && cou > rows)
                    {
                        //行数乘以页数减去总数大于0，说明：（总数：31，页数：4，显示最后1行）
                        if (rows*page - total > 0)
                        {
                            for (int i = (page - 1)*rows; i < cou; i++)
                            {
                                list.Add(contelist[i]);
                            }
    
                            foreach (var cc in list)
                            {
                                tt += cc + ",";
                            }
                        }
                            //行数乘以页数减去总数小于等于0，（总数：31，页数：2，显示10行）
                        else if (rows*page - cou <= 0)
                        {
                            for (int i = (page - 1)*rows; i < rows*page; i++)
                            {
                                list.Add(contelist[i]);
                            }
    
                            foreach (var cc in list)
                            {
                                tt += cc + ",";
                            }
                        }
    
                    }
                    if (total == 0)
                    {
                        context.Response.Write(json);
                    }
                    else
                    {
                        string jsonstring = "{\"total\":" + cou + ",\"rows\":[" + tt.ToString() + "]}";
                        context.Response.Write(jsonstring.Remove(jsonstring.Length - 3, 1));
                    }
                //}
            //}
        }
    
        public bool IsReusable
            {
                get
                {
                    return false;
                }
            }
        }
    }

4.日期组合框DateBox设置readonly的解决方法。

//继承自combo，使用combo的editable属性设置readonly.
                $("#BeginTime").datebox({ editable: false });
                //$("#Content input[name='BeginTime']").attr('readonly', 'readonly');
                $("#EndTime").datebox({ editable: false });
                //$("#Content input[name='EndTime']").attr('readonly', 'readonly');

[image]: /images/20220331/52e308e533304514ba69bdfb6a707338.png
[image 1]: /images/20220331/434556934a794b5e9d5c16ed1094cac1.png
[image 2]: /images/20220331/aff39c2a463a4ec8a95fdafd0b8c4e5c.png