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(树形表格)组件的使 ...
随机推荐
- 如何穿越到android底层
对于android开发,实际上大部分工作都是在应用层,但为了体现"技术含量",以及"知其所以然",以便在遇到问题是不至于束手无策.因此有必要了解底层的工作机制. ...
- Window10可用的转串口驱动CH340
下载地址:http://pan.baidu.com/s/1cvCNtO
- linux 排序命令sort
sort [选项] [文件] 选项: -b:忽略每行前面开始出的空格字符: -c:检查文件是否已经按照顺序排序: -d:排序时,处理英文字母.数字及空格字符外,忽略其他的字符: -f:排序时,将小写字 ...
- 一致性算法RAFT详解
原帖地址:http://www.solinx.co/archives/415?utm_source=tuicool&utm_medium=referral一致性算法Raft详解背景 熟悉或了解 ...
- 基于Fast Bilateral Filtering 算法的 High-Dynamic Range(HDR) 图像显示技术。
一.引言 本人初次接触HDR方面的知识,有描述不正确的地方烦请见谅. 为方便文章描述,引用部分百度中的文章对HDR图像进行简单的描述. 高动态范围图像(High-Dynamic Range,简称HDR ...
- libsvm简介和函数调用参数说明
1. libSVM简介 libSVM是台湾林智仁(Chih-Jen Lin) 教授2001年开发的一套支持向量机库,这套库运算速度挺快,可以很方便的对数据做分类或回归.由于libSVM程序小 ...
- 【2016-11-3】【坚持学习】【Day18】【ADO.NET 】
使用Connection创建数据库连接 使用Command创建命令 使用ExecuteScalar,ExecuteNonQuery,ExecuteReader方法来执行命令 使用DataReader来 ...
- Hibernate双向多对多关联
一.配置双向多对多关联 以Project类(项目)和Emp类(员工)为例: 1.创建Project类,并需要定义集合类型的Emp属性 public class Project { //编号 priva ...
- 第二章 spring
一.Bean作用域 spring容器创建的时候,会将所有配置的bean对象创建出来,默认bean都是单例的.代码通过getBean()方法从容器获取指定的bean实例,容器首先会调用Bean类的无参构 ...
- Centos7 防火墙简介(一)
Centos7下的防火墙默认是通过一个守护进程(firewalld)为网络(network) 以及与之相关的连接(connections)和接口(interface)提供一个可信层,同时支持网络空间( ...