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中的网页布局一共分为五部分,分别为 ...
随机推荐
- Longest Common Subsequence
Given two strings, find the longest common subsequence (LCS). Your code should return the length of ...
- 解决ubuntu每次重启屏幕亮度都重置为最高亮度问题
很多朋友都会碰到这个问题,Ubuntu系统,每次通过系统设置修改了屏幕亮度,重启系统都会将屏幕亮度调成最大值,很是苦恼. 上网搜索一番发现,修改屏幕亮度的文件是:/sys/class/backligh ...
- python trackback的使用心得
以前在读代码的时候总是要花很久时间去找在哪里调用的某个函数,现在好了,直接使用:trackback.print_stack()就可以打印出调用栈了,在那个地方调用的一目了然... 而如果是异常栈的话就 ...
- opencv统计二值图黑白像素个数
#include "iostream" #include "queue" #include "Windows.h" #include < ...
- 微型Http服务器Tiny Http Server
Tiny Http Server 一个简单的跨平台Http服务器．服务器部分使用了Mongoose的代码,界面是使用QT开发的． 开发为了在临时需要使用一个http服务器来做发布代码文档的时候,不用去 ...
- python字符串函数
- ubuntu add application to launcher
eg. add sublime text to launcher so as to be found by launcher, docky, etc. add a file sudo gedit /u ...
- python 模块之间的变量共享
才疏学浅,只知道两种方式: 1. 通过__builtin__实现: builtin1.py import __builtin__ __builtin__.some_global_var_among_m ...
- Lua简易入门教程
环境:lua for windows (lfW)主页:http://luaforwindows.luaforge.net/https://code.google.com/p/luaforwindows ...
- 深入浅出Java回调机制
本文转载自http://hellosure.iteye.com/blog/1130176 在网上看到了一个比喻,觉得很形象,这里借用一下: 你有一个复杂的问题解决不了,打电话给你的同学,你的同学说可以 ...