EasyUi – 6.easyui常见问题
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');
2.JQuery EasyUI弹出对话框解决Asp.net服务器控件无法执行后台代码的方法
var dlg = $('#dd').dialog({
title: '导入excel,请选择..',
width: ,
height: ,
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
<form id="form1" runat="server">
<div id="dd">
<div>
<div id="fileQueue" style="margin-left: 20px">
<p>
<asp:FileUpload ID="FileUpload_excel" runat="server" />
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</p>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>
</div>
</div>
</form>
解决方法：在点击按钮打开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+'%'
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;" onclick="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>
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, ),
};
parameters[].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 = ;
//设置内容：把(remark[y].ToString() == username)的remark添加进去
ArrayList contelist = new ArrayList(); for (int y = ; 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 == && cou <= rows)
{
//根据前台 rows 得到 content
for (int i = ; i < rows - (rows - cou); i++)
{
list.Add(contelist[i]);
} foreach (var cc in list)
{
tt += cc + ",";
}
} //page是第1页 and 总数大于行数（例：总数11，行数10）
else if (page == && cou > rows)
{
//根据前台 rows 得到 content
for (int i = ; i < rows; i++)
{
list.Add(contelist[i]);
} foreach (var cc in list)
{
tt += cc + ",";
}
}
//page不等于1 and 总数大于行数
else if (page != && cou > rows)
{
//行数乘以页数减去总数大于0，说明：（总数：31，页数：4，显示最后1行）
if (rows*page - total > )
{
for (int i = (page - )*rows; i < cou; i++)
{
list.Add(contelist[i]);
} foreach (var cc in list)
{
tt += cc + ",";
}
}
//行数乘以页数减去总数小于等于0，（总数：31，页数：2，显示10行）
else if (rows*page - cou <= )
{
for (int i = (page - )*rows; i < rows*page; i++)
{
list.Add(contelist[i]);
} foreach (var cc in list)
{
tt += cc + ",";
}
} }
if (total == )
{
context.Response.Write(json);
}
else
{
string jsonstring = "{\"total\":" + cou + ",\"rows\":[" + tt.ToString() + "]}";
context.Response.Write(jsonstring.Remove(jsonstring.Length - , ));
}
//}
//}
} 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');
EasyUi – 6.easyui常见问题的更多相关文章
- SpringMVC +mybatis+spring 结合easyui用法及常见问题总结
SpringMVC +mybatis+spring 结合easyui用法及常见问题总结 1.FormatString的用法. 2.用postAjaxFillGrid实现dataGrid 把form表单 ...
- 【easyui】—easyui教你编写一个前台的架子
以前做项目都是在别人搭建好的环境下直接编写单独的页面,也没有处理过怎么搭建一个框架.看到别人的布局都挺好的,自己也想做一个走一下流程. 嘿,刚开始时看着别人写的代码,去找怎么写. 这是我自己的想法,使 ...
- EasyUI datagrid easyui datagrid +dialog 加载 可直接运行 七
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta ht ...
- 杂项： EasyUI | jQuery EasyUI
ylbtech-杂项-JS: EasyUI | jQuery EasyUI jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻 ...
- EasyUI介绍及常见问题
JQuery Easy UI介绍 1.JQuery Easy UI环境搭建和调试: https://jingyan.baidu.com/article/67508eb4342f9f9cca1ce426 ...
- EasyUi – 6.easyui常见问题
1.进度条 2.JQuery EasyUI弹出对话框解决Asp.net服务器控件无法执行后台代码的方法 3. 三张表的连接查询现在到datagrid里 4.日期组合框DateBox设置readonly ...
- 【Asp.Net使用EasyUI】EasyUI combox实现联动
很多时候都会用到combox的联动效果,选择上一个combox的值就自动带出这个值对应的其它信息,比如省市联动,最近我也刚好遇到了类似的要求,是用EasyUI combobox 控件完成的,如果是A ...
- [easyui] - 在easyui的table中展示提示框
因为在easyui的table中字段过多,而无法展示全时,被迫只能使用这个方法. 使用方式: 在 $('#dg').datagrid({ 后的 queryParams: form2Json('sear ...
- 【EasyUI】——EasyUI的布局
做一个站点首先要有站点的布局,所谓的布局事实上就是网页的排版.就是说你的网页显示时是什么样子的. 就比方百度的首页: 无论是谁登录.网页都是这个样式的. EasyUI中的网页布局一共分为五部分,分别为 ...
随机推荐
- LibreOJ #541. 「LibreOJ NOIP Round #1」七曜圣贤（单调队列）
被以前自己瞎YY的东西坑了T T...单调队列的确是可以维护这种操作的.... 显然这题可以转化成维护不在车上的东西的最小值, 支持插入和删去最早出现的值,然后就可以用单调队列了T T #includ ...
- Codeforces Round #338 (Div. 2) D 数学
D. Multipliers time limit per test 2 seconds memory limit per test 256 megabytes input standard inpu ...
- Codeforces 717.F Heroes of Making Magic III
F. Heroes of Making Magic III time limit per test 3 seconds memory limit per test 256 megabytes inpu ...
- python学习(九) 网络编程学习--简易网站服务器
python `网络编程`和其他语言都是一样的,服务器这块步骤为:`1. 创建套接字``2. 绑定地址``3. 监听该描述符的所有请求``4. 有新的请求到了调用accept处理请求` Python ...
- 「Django」rest_framework学习系列-序列化
序列化方式一 :在业务类里序列化数据库数据 class RolesView(APIView): def get(self,request,*args,**kwargs): roles = models ...
- java类的静态属性值获取
获取某个类实例的静态属性: public class ErrorCode { private String code; private String message; private ErrorCod ...
- 最小割dp Intel Code Challenge Final Round (Div. 1 + Div. 2, Combined) E
http://codeforces.com/contest/724/problem/E 题目大意:有n个城市,每个城市有pi件商品,最多能出售si件商品,对于任意一队城市i,j,其中i<j,可以 ...
- 【CodeForces】708 B. Recover the String 数学构造
[题目]B. Recover the String [题意]找到一个串s,满足其中子序列{0,0}{0,1}{1,0}{1,1}的数量分别满足给定的数a1~a4,或判断不存在.数字<=10^9, ...
- ADO.NET中带参数的Sql语句的陷阱
1.使用Parameter //利用构造函数方式 ,不推荐这样写 Parameter p =new Parameter("@id",值); cmd.Parameters.Add(p ...
- 【洛谷 P2900】 [USACO08MAR]土地征用Land Acquisition（斜率优化，单调栈）
题目链接 双倍经验 设\(H\)表示长,\(W\)表示宽. 若\(H_i<H_j\)且\(W_i<W_j\),显然\(i\)对答案没有贡献. 于是把所有点按\(H\)排序,然后依次加入一个 ...