一个关于jqGrid使用的小例子(行按钮)

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jqGrid的JSON数据显示</title>
<style type="text/css">
body{font-size:12px;}
</style>
<link href=#><link href=#><script type="text/javascript" src="../js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.8.14.custom.min.js"></script>
<script type="text/javascript" src="../js/grid.locale-cn.js"></script>
<script type="text/javascript" src="../js/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
function Modify(id) { //单击修改链接的操作
var model = jQuery("#list1").jqGrid('getRowData', id);
//alert(model.Id);
$("#txtCityCode").val(model.Code);
$("#txtCityName").val(model.Name);
$("#txtFID").val(model.Fid);
$("#modifyform").dialog({
height:230,
width:400,
resizable:false,
modal:true, //这里就是控制弹出为模态
buttons:{
"确定":function(){
alert("在这里对数据进行修改!");
$(this).dialog("close");
},
"取消":function(){$(this).dialog("close");}
}
});
}
function Delete(id) { //单击删除链接的操作
alert("在这里执行异步删除操作,此时点击了id为 "+id+" 的行!");
}
$(document).ready(function(){
$("#list1").jqGrid({
url:'JsonDataHandler2.aspx',
datatype:"json",
mtype:'GET',
height:200,
colNames:['编号','城市编号','城市名称','所属省份编号','修改','删除'], //注意在colNames和colModel中都不要忘记加修改和删除这两列
colModel:[
{name:'Id',index:'Id',width:55},
{name:'Code',index:'Code',width:100},
{name:'Name',index:'Name',width:180, sortable:false},
{name:'Fid',index:'Fid',width:180},
{name:'Modify',index:'Id',width:80,align:"center",sortable:false},
{name:'Delete',index:'Id',width:80,align:'center',sortable:false}
],
//autowidth:true,
jsonReader:{
page:"page",
total:"total",
repeatitems:false,
id:"Id"
},
pager:jQuery('#pager1'),
rowNum:20,
rowList:[10,20,30],
sortname:'Id',
sortorder:'asc',
viewrecords:true,
caption:'jqGrid使用JSON数据测试',
gridComplete:function(){ //在此事件中循环为每一行添加修改和删除链接
var ids=jQuery("#list1").jqGrid('getDataIDs');
for(var i=0; i<ids.length; i++){
var id=ids[i];
modify ="<a href=#>del ="<a href=#>jQuery("#list1").jqGrid('setRowData', ids[i], { Modify: modify, Delete: del });
}
}
}).navGrid("#pager1",{edit:false,add:false,del:false,search:false});

});
</script>
</head>
<body>
<table id="list1"></table>
<div id="pager1"></div>
<div id="modifyform" title="修改城市资料"><!-- 该Div的作用就是当点击jqGrid表格中的修改链接时弹出的dialog, 注意是在上面的Modify(id)函数中给下面的input赋值 -->
<p>城市编号:<input type="text" id="txtCityCode"/></p>
<p>城市名称:<input type="text" id="txtCityName"/></p>
<p>所属省份编号:<input type="text" id="txtFID"/></p>
</div>
</body>
</html>

本页内容版权归属为原作者,如有侵犯您的权益,请通知我们删除。
本文实例讲述了jQuery实现的感应鼠标悬停图片色彩渐显效果。分享给大家供大家参考。具体实现方法如下: 复制代码 代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head title超个性的感应鼠标悬停图片色彩渐显效果/t

了解Javascript的模块化开发 - 2015-05-15 09:05:42

小A是某个创业团队的前端工程师,负责编写项目的Javascript程序。 全局变量冲突 根据自己的经验,小A先把一些常用的功能抽出来,写成函数放到一个公用文件base.js中: 复制代码 代码如下: var _ = { $: function(id) { return document.getElementById(id); }, getCookie: function(key) { ... }, setCookie: function(key, value) { ... } }; 小A把这些函数都放在_
1,onload事件 复制代码 代码如下: !DOCTYPE HTML HTML HEAD meta charset="utf-8" / titleLink Element onload/title link type="text/css" rel="stylesheet" href=#>/HEAD BODY /BODY /HTML IE6/7 : IE8/9 : Opera : 即IE6/7/8/9/Opera都支持onload事件, Firefox/Safari/Chrome不支持。 注:用JS创建li
在线演示 我们曾经介绍过俩款知名的响应式布局插: isotope 和 masonary ,今天我们这里再介绍一款相当不错的响应式布局插件
JavaScript的语法有多坑,算是众人皆知了。 先来上张图 代码如下: 复制代码 代码如下: {} + []; // 0 [] + {}; // "[object Object]" {} + [] == [] + {}; // false ({} + [] == [] + {}); // true 这么蛋疼的语法坑估计也只有 JavaScript 这样的奇葩才有。 相信对于绝大部分不研究 JavaScript 编译器的童鞋,根本无法理解。(至少我也是觉得不可思议) 后来专门去度娘了一下,才有点恍然大悟
版本一 css代码部分: 复制代码 代码如下: .focus { border: 1px solid #f00; background: #fcc; } 当焦点获得时,添加focus样式,添加边框,并改背景色为#fcc html代码部分: 复制代码 代码如下: body form action="" method="post" id="regForm" fieldset legend个人基本信息/legend div label for="username"名称:/label input id="user
CheckBox控件就是我们一般所说的复选框,通常用于某选项的打开或关闭。大多数应用程序的“设置”对话框内均有此控件。我们看到的可以打勾的就是CheckBox。 该控件表明一个特定的状态(即选项)是选定 (on,值为1) 还是清除 (off,值为0)。在应用程序中使用该控件为用户提供“True/False”或“yes/no”的选择。因为 CheckBox 彼此独立工作,所以用户可以同时选择任意多个 CheckBox,进行选项组合。 CheckBox复选框JS实现全选全不选功能,很简单,就只需插入一小段js
extjs提供了方便的表格组件grid供使用,但是默认情况下表格中的文本是不能被选中的,自然也是无法复制的。 而选择复制文本的需要也是很平常的,于是我们就需要自己动手来解决这个问题,实现extjs的grid文本选择复制功能。 说明一点,文中所列出的代码片断都是在当前ext 4.0.2a版本下的,其它版本未做测试,请自行斟酌。 首先自定义一下样式,来覆盖默认的css样式: 复制代码 代码如下: style type="text/css" .x-selectable, .x-selectable * { -mo
文件上传之前的检测,通常是通过文件名来判断文件类型是否合法,但是要想检测文件的大小很难办到,除非在本地或者使用控件。使用JS可以轻松解决词问题,js在上传图片前判断大小 这个可以用javascript实现,效果...//允许上传图片文件的大小 具体代码如下 复制代码 代码如下: script language=javascript var ImgObj=new Image(); //建立一个图像对象 var AllImgExt=".jpg|.jpeg|.gif|.bmp|.png|"//全部图片格式类型 v
复制代码 代码如下: Ext.onReady(function(){ //定义store var chartStore = new Ext.data.JsonStore({ root:'root', fields:[ {name:'ne',type:'string'},//网元 {name:'confine',type:'int'},//阀值 {name:'bill',type:'string'}//工单数 ], sortInfo:{field: 'bill', direction: 'ASC'} });