Web jquery表格组件 JQGrid 的使用 - 11.问题研究
系列索引
Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引
Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数、ColModel API、事件及方法
Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页、搜索、格式化、自定义按钮
Web jquery表格组件 JQGrid 的使用 - 6.准备工作 & Hello JQGrid
Web jquery表格组件 JQGrid 的使用 - 7.查询数据、编辑数据、删除数据
Web jquery表格组件 JQGrid 的使用 - 8.Pager、新增数据、查询、刷新、查看数据
Web jquery表格组件 JQGrid 的使用 - 全部代码
Web jquery表格组件 JQGrid 的使用 - 11.问题研究
目录
1. 翻页按钮不可用
2. 编辑和删除时传值
3. 一列修改为button 按钮
4. 动态修改url
5.下拉联动效果
6. 使用webservice加载数据
11.问题研究
loadonce: true,
Deldata 或editdata
delData: {
delId: function () {
var sel_id =
$(grid_selector).jqGrid('getGridParam', 'selrow');
var value = $(grid_selector).jqGrid('getCell',
sel_id, 'UserId');
return value;
}
},
{ name: 'Manage', index: 'Name', width: 30, edittype: "button", sortable: false,
align: 'center' },
然后去loadComplete 事件里增加:
loadComplete: function () {
var rowIds = $(grid_selector).jqGrid('getDataIDs');
if (rowIds) {
for (var i = 0, j = rowIds.length; i < j; i++) {
id = $(grid_selector).jqGrid('getCell', rowIds[i],
'UserId');
var Btn = "<a href='#' id='id-btn-dialog2' class='btn btninfo
btn-sm' onclick='EditClick(" + id + ")'>编辑</a>";
$(grid_selector).jqGrid('setRowData', rowIds[i], { 'Manage':
Btn });
}
}
},
url: "WebService/ UserHandler.ashx?UserID=" + userID,
$(grid_selector).jqGrid('setGridParam', { url: "WebService/ UserHandler.ashx?UserID=" +
userID,});
//重新加载jqgrid
$(grid_selector).jqGrid('setGridParam', { datatype: 'json'
}).trigger('reloadGrid');
5.下拉联动效果
{
name: 'a', index: 'a', width: 90, sortable: true, editable: true, edittype: "select", editrules: { required: true }, editoptions: {
value: function () {
var s = "";
return s;
},
dataEvents:[{type:'change',fn:function(e){
var ID= $("select#ID");//select#ID 表示jqgrid的一列,名称为ID,这是需要联动的select
var a= this.value; //a为当前单元格select对象的value
var s = "";
try {
$.ajax({
type: "POST", //访问WebService使用post方式请求
contentType: "application/json;utf-8", //WebService会返回json类型
url: "../WebService/a.asmx/a", //调用WebService的地址和方法名称组合
data: "{a:" + a+ "}", //传个参数,根据当前select的value获取要联动的内容
dataType: "json",
async: false, //不能异步,需同步
success: function (result) {
var theString = result.d;
var ids= [];//一系列id对象,有ID和Name两个字段 ids= eval('(' + theString + ')');
for (var i = 0; i < ids.length; i++) {
s = s + "<option value='" + ids[i].ID+ "'>" + aaidsi].Name+ "</option>"; //注意这里是要用option的,不能value:name这样的设置value
} ID.html(s); //这里要html一下
}
})
}
catch (ex) {
bootbox.alert(ex);
}
}}]
}
},
var req = new XMLHttpRequest();
function resAjaxRequestGetData() {
if (req.readyState == 4) {
var res = JSON.parse(req.responseText);
var thegrid = $(grid_selector)[0];
thegrid.addJSONData(JSON.parse(res.d));
}
}
function AjaxRequestGetData() {
req.open("POST", "WebService/WebService.asmx/LoadDataDT", true);
req.setRequestHeader("Content-Type", "application/json; charset=utf-8");
req.onreadystatechange = resAjaxRequestGetData;
req.send(null);
}
datatype: function (pdata) {
AjaxRequestGetData();
},
WebService 代码:
[WebMethod]
public object LoadAlarmTodayDT()
{
string cmdText = "SELECT UserId, UserCode, Password FROM T_User";
SQLHelper sqlhelper = new SQLHelper();
DataTable dt = sqlhelper.Selectinfo(cmdText);
return DAL.UserManagerDAL.GetJson(dt);
}
或者:
datatype: function (pdata) {
AjaxRequestGetData("LoadDT");
},
function resAjaxRequestGetData() {
if (req.readyState == 4) {
var res = JSON.parse(req.responseText);
var thegrid = $(grid_selector)[0];
thegrid.addJSONData(JSON.parse(res.d));
}
} function AjaxRequestGetData(method) {
req.open("POST", "../WebService/WS.asmx/" + method, true);
req.setRequestHeader("Content-Type", "application/json; charset=utf-8");
req.onreadystatechange = resAjaxRequestGetData;
req.send(null);
}
Web jquery表格组件 JQGrid 的使用 - 11.问题研究的更多相关文章
- Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引
因为内容比较多,所以每篇讲解一些内容,最后会放出全部代码,可以参考.操作中总会遇到各式各样的问题,个人对部分问题的研究在最后一篇 问题研究 里.欢迎大家探讨学习. 代码都经过个人测试,但仍可能有各种未 ...
- Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数、ColModel API、事件及方法
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
- Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页、搜索、格式化、自定义按钮
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
- Web jquery表格组件 JQGrid 的使用 - 6.准备工作 & Hello JQGrid
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
- Web jquery表格组件 JQGrid 的使用 - 7.查询数据、编辑数据、删除数据
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
- Web jquery表格组件 JQGrid 的使用 - 8.Pager、新增数据、查询、刷新、查看数据
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
- Web jquery表格组件 JQGrid 的使用 - 全部代码
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
- 扩展HT for Web之HTML5表格组件的Renderer和Editor
在HT for Web提供了一下几种常用的Editor,分别是: slider:拉条 color picker:颜色选择器 enum:枚举类型 boolean:真假编辑器 string:普通的文本编辑 ...
- 第二百二十八节,jQuery EasyUI,TreeGrid(树形表格)组件
jQuery EasyUI,TreeGrid(树形表格)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 TreeGrid(树形表格)组件的使 ...
随机推荐
- 关于 Java 数组的 12 个最佳方法
1. 声明一个数组 String[] aArray = new String[5]; String[] bArray = {"a","b","c&q ...
- 发现 OpenStack: 架构、功能和交互
原文:http://www.ibm.com/developerworks/cn/cloud/library/cl-openstack-overview/index.html OpenStack 是由 ...
- linux中offsetof与container_of宏定义
linux内核中offsetof与container_of的宏定义 #define offsetof(TYPE, MEMBER) ((size_t) &((TYPE *)0)->M ...
- 【Windows编程】系列第七篇:Menubar的创建和使用
上一篇我们学习了利用windows API创建工具栏和菜单栏,与上一篇紧密联系的就是菜单栏,菜单栏是一个大多数复杂一些的Windows应用程序不可或缺的部分.比如下图就是Windows自带的记事本的菜 ...
- 【php+mysql】博客分页制作思路
1.首先需要初始化设置每页显示的文章数$page_size,mysql数据库中总的文章数$arc_size,页面数$page 2.利用分页公式 (当前页数 - 1 )X 每页条数 , 每页条数Sele ...
- 如何读取Access里的OLE类型的图片
身份证一类读卡器读取的照片信息,保存在Access数据库中一般为OLE型字段,图片为BMP格式,因为是用其读卡器写入的,其数据类型为常二进制数据. 再用报表或EXCEL读取这些图片时,如果将该图片字段 ...
- 转: 深入理解Linux修改hostname
from: http://www.cnblogs.com/kerrycode/p/3595724.html 写的相当详细!!! 深入理解Linux修改hostname 2014-03-12 10:17 ...
- java多线程系类:JUC线程池:02之线程池原理(一)
在上一章"Java多线程系列--"JUC线程池"01之 线程池架构"中,我们了解了线程池的架构.线程池的实现类是ThreadPoolExecutor类.本章,我 ...
- js jQuery取消添加超链接的方法小结
今天在工作中需要将某个链接给取消实现只触发事件的目的,后来发现批量取消链接等,脚本之家简单的给整理了下,希望对需要的朋友有所帮助. 单个链接取消链接并触发js事件 <a href="j ...
- knockoutJS学习笔记06:ko数组与模板绑定
前面已经介绍了基本的绑定和模板相关知识,接下来就看ko里的数组和模板绑定,数组和模板绑定应该是实际项目中用得比较多的,ko提供了很好的支持. 一.observaleArray 前面的监控属性都是单个对 ...