<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>地址列表</title>
<link rel="stylesheet" type="text/css" media="screen" href="../css/cssgame/smoothness/jquery-ui-1.7.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../css/cssgame/ui.jqgrid.css" />
<style>
html,body {
margin: 0;
padding: 0;
font-size: 80%;
}
</style>
<script type="text/javascript" src="../js/jsgame/jquery.min.js"></script>
<script src="/js/myweb/i18n/grid.locale-cn.js" type="text/javascript"></script>
<script type="text/javascript" src="../js/jsgame/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="../js/jsgame/ui.core.js"></script>
<script type="text/javascript" src="../js/jsgame/ui.draggable.js"></script>
<script type="text/javascript" src="../js/jsgame/ui.resizable.js"></script>
<script type="text/javascript" src="../js/jsgame/ui.dialog.js"></script>
<script type="text/javascript" src="../js/jsgame/effects.core.js"></script>
<script type="text/javascript" src="../js/jsgame/effects.highlight.js"></script>
<script type="text/javascript" src="../js/jsgame/jquery.bgiframe.js"></script>
<script type="text/javascript" src="../js/jsgame/jquery.form.js"></script>
<script type="text/javascript">
function postform(){
var options = {
url:"g_wap_chaddr_crud.jsp?type=add",
type:"post",
success: function(msg){
//alert(msg);
alert(msg.substring(2,msg.length).replace("error","添加失败").replace("success","添加成功").replace("exist","该ID已经存在"));
$("#myweb_list").trigger("reloadGrid");
}
};
$('#myweb_form').ajaxSubmit(options);
}
// 删除
function del(){
$.ajax({
type: "POST",
url:"g_wap_chaddr_crud.jsp?type=del&id="+$("#ch_id_del").attr("value"),
success: function(msg){
//alert(msg);alert(msg.length);
alert(msg.substring(2,msg.length).replace("error","删除失败").replace("success","删除成功"));
$("#myweb_list").trigger("reloadGrid");
/*
if(msg.length==9){
alert("删除成功");
$("#myweb_list").trigger("reloadGrid");
}else if(msg.length==7){
alert("删除失败");
$("#myweb_list").trigger("reloadGrid");
}
*/
}
});
}
// 修改
function update_(){
$.ajax({
type: "POST",
url:"g_wap_chaddr_crud.jsp?type=update&id="+$("#channel_up_id").attr("value")+"&channel_addr_up="+$("#channel_addr_up").attr("value")+"&channel_name_up="+$("#channel_name_up").attr("value"),
success: function(msg){
//alert(msg);
alert(msg.substring(2,msg.length).replace("error","修改失败").replace("success","修改成功"));
$("#myweb_list").trigger("reloadGrid");
}
});
}
// 修改
function update(){
var options = {
url:"g_wap_chaddr_crud.jsp?type=update",
type:"post",
success: function(msg){
alert(msg.substring(2,msg.length).replace("error","修改失败").replace("success","修改成功"));
$("#myweb_list").trigger("reloadGrid");
}
};
$('#myweb_form_up').ajaxSubmit(options);
}
// 添加
function add(){
$.ajax({
type: "POST",
url:"g_wap_chaddr_crud.jsp?type=add&channel_name="+$("#channel_name").attr("value"),
success: function(msg){
//alert(msg);
alert(msg.substring(2,msg.length).replace("error","添加失败").replace("success","添加成功").replace("exist","该机型已经存在"));
$("#myweb_list").trigger("reloadGrid");
}
});
}
// 批量添加
function add_batch(){
$.ajax({
type: "POST",
url:"g_wap_chaddr_crud.jsp?type=add_batch&channel_batch="+$("#channel_batch").attr("value"),
success: function(msg){
//alert(msg);
alert(msg.substring(2,msg.length).replace("error","添加失败").replace("success","添加成功").replace("exist","该机型已经存在"));
$("#myweb_list").trigger("reloadGrid");
}
});
}
jQuery(document).ready(function(){
jQuery("#myweb_list").jqGrid({
url:'g_wap_chaddr_data.jsp',
datatype: 'xml',
mtype: 'GET',
colNames:['序号','ID','名称','地址'],
colModel :[
{name:'id',align:"center",width:"15%",search:false},
{name:'channel_id',align:"center",width:"20%",search:true},
{name:'channel_name',align:"center",width:"25%",search:true},
{name:'channel_addr',align:"center",width:"50%",search:false}
],
xmlReader: {
root: "rows",
row: "row",
page: "rows>page",
total: "rows>total",
records : "rows>records",
repeatitems: true,
cell: "cell",
id: "[id]"
},
pager: '#myweb_pager',
rowNum:25,
rowList:[25,50,100],
viewrecords: true,
height: "100%",
autowidth:true,
forceFit:true,
multiselect: true,
gridview : true,
caption: '地址列表'
});
jQuery("#myweb_list").navGrid('#myweb_pager',{
edit:false,add:false,del:false,search:false,refreshtext:"刷新"
}
);
jQuery("#myweb_list").navButtonAdd('#myweb_pager',{
caption:"修改",buttonicon:"ui-icon-pencil",title:"修改", onClickButton: function(){
var gr = jQuery("#myweb_list").jqGrid('getGridParam','selarrrow');
var len = gr.length;
if(len==0){
alert("请选择要修改的纪录");
}else if(len>1){
alert("修改时只能选中一条记录");
}else{
var rowid=gr[0];
//var contents = $("#myweb_list").getCell(rowid, "invdate")+$("#myweb_list").getCell(rowid, "amount");
$("#channel_name_up").attr("value",$("#myweb_list").getCell(rowid, "channel_name"));
$("#channel_addr_up").attr("value",$("#myweb_list").getCell(rowid, "channel_addr"));
$("#channel_id_up").attr("value",$("#myweb_list").getCell(rowid, "channel_id")).attr("readonly","true");
$("#channel_up_id").attr("value",rowid);
$('#shsp_dialog_up').dialog('option', 'title', '修改');
$('#shsp_dialog_up').dialog('open');
}
}, position:"last"
});
jQuery("#myweb_list").navButtonAdd('#myweb_pager',{
caption:"删除",buttonicon:"ui-icon-trash",title:"删除", onClickButton: function(){
var gr = jQuery("#myweb_list").jqGrid('getGridParam','selarrrow');
var len = gr.length;
if(len==0){
alert("请选择要删除的纪录");
}else{
var rowid=gr[0];
var contents = $("#myweb_list").getCell(rowid, "invdate");
$("#ch_id_del").attr("value",gr);
$("#ch_id_del").attr("readonly","true");
$('#shsp_dialog_del').dialog('option', 'title', '删除');
$('#shsp_dialog_del').dialog('open');
}}, position:"last"
});
/*
jQuery("#myweb_list").navButtonAdd('#myweb_pager',{
caption:"明细",buttonicon:"ui-icon-pencil",title:"明细", onClickButton: function(){
var gr = jQuery("#myweb_list").jqGrid('getGridParam','selarrrow');
var len = gr.length;
if(len==0){
alert("请选择要察看明细的纪录");
}else if(len>1){
alert("察看明细时只能选中一条记录");
}else{
var rowid=gr[0];
//self.location='g_channel_gart.jsp?ch_id='+$("#myweb_list").getCell(rowid, "ch_id")+'&id='+rowid+'&game_type_id='+$("#myweb_list").getCell(rowid, "game_type_id");
self.location='ser_ua_list_gart.jsp?id='+rowid;
}
}, position:"last"
});
jQuery("#myweb_list").navButtonAdd('#myweb_pager',{
caption:"查询",buttonicon:"ui-icon-document",title:"查询", onClickButton: function(){
jQuery("#myweb_list").jqGrid('searchGrid',
{sopt:['eq']}
);
}, position:"last"
});
jQuery("#myweb_list").navButtonAdd('#myweb_pager',{
caption:"返回",buttonicon:"ui-icon-document",title:"返回上级", onClickButton: function(){
self.location='g_channel_list.jsp';
}, position:"last"
});
*/
// 添加
jQuery("#myweb_list").navButtonAdd('#myweb_pager',{
caption:"添加",buttonicon:"ui-icon-check",title:"添加", onClickButton: function(){
$('#shsp_dialog').dialog('open');
}, position:"last"
});
/* 批量添加
jQuery("#myweb_list").navButtonAdd('#myweb_pager',{
caption:"批量添加",buttonicon:"ui-icon-check",title:"添加", onClickButton: function(){
$('#shsp_dialog_batch').dialog('open');
}, position:"last"
});
*/
});
</script>
<script type="text/javascript">
$(function() {
// 删除
$("#shsp_dialog_del").dialog({
bgiframe: true,
autoOpen: false,
modal: true,
buttons: {
'提交': function() {
var bValid = true;
if (bValid) {
del();
$(this).dialog('close');
}
},
'取消': function() {
$(this).dialog('close');
$("#myweb_list").trigger("reloadGrid");
}
}
});
// 修改
$("#shsp_dialog_up").dialog({
bgiframe: true,
autoOpen: false,
modal: true,
buttons: {
'确定修改': function() {
var bValid = true;
var ser_ = $("#channel_addr_up").attr("value");
if(ser_!=""){
update();
}else{
alert("修改的地址不能为空");
}
$(this).dialog('close');
},
'取消': function() {
$(this).dialog('close');
$("#myweb_list").trigger("reloadGrid");
}
}
});
// 新增
$("#shsp_dialog").dialog({
bgiframe: true,
autoOpen: false,
modal: true,
buttons: {
'提交': function() {
var bValid = true;
var ch_id = $("#channel_id").attr("value");
var ch_addr = $("#channel_addr").attr("value");
if(ch_id==""){
alert("渠道ID不能为空");
}else if(ch_addr==""){
alert("渠道地址不能为空");
}else{
//add();
postform();
}
$(this).dialog('close');
},
'取消': function() {
$(this).dialog('close');
$("#myweb_list").trigger("reloadGrid");
}
}
});
/* 批量新增
$("#shsp_dialog_batch").dialog({
bgiframe: true,
autoOpen: false,
modal: true,
buttons: {
'提交': function() {
var bValid = true;
var ser_ = $("#channel_batch").attr("value");
//alert(ser_);
//alert($("#upload_text").attr("value"));
if(ser_!=""){
add_batch();
$(this).dialog('close');
}else{
alert("新增型号不能为空");
$(this).dialog('close');
}
},
'取消': function() {
$(this).dialog('close');
$("#myweb_list").trigger("reloadGrid");
}
}
});
*/
});
</script>
</head>
<body>
<table id="myweb_list"></table>
<div id="myweb_pager"></div>
<div id="shsp_dialog_del" title="删除">
删除此条数据：<input type="text" name="ch_id" id="ch_id_del" readonly value=""/>
</div>
<div id="shsp_dialog" title="添加">
<form id="myweb_form" name="myweb_form" enctype="multipart/form-data" action="g_wap_chaddr_crud.jsp" method="post">
名称：<br/><input type="text" name="channel_name" id="channel_name" value="" style ="width:250px;cursor:hand"/><br/>
ID：<br/><input type="text" name="channel_id" id="channel_id" value="" style ="width:250px;cursor:hand"/><br/>
地址：<br/><input type="text" name="channel_addr" id="channel_addr" value="" style ="width:250px;cursor:hand"/>
</form>
</div>
<div id="shsp_dialog_up" title="修改">
<form id="myweb_form_up" name="myweb_form_up" enctype="multipart/form-data" action="g_wap_chaddr_crud.jsp" method="post">
名称：<br/><input type="text" name="channel_name_up" id="channel_name_up" value="" style ="width:280px;cursor:hand"/><br/>
ID：<br/><input type="text" name="channel_id_up" id="channel_id_up" value="" style ="width:280px;cursor:hand"/><br/>
地址：<br/><input type="text" name="channel_addr_up" id="channel_addr_up" value="" style ="width:280px;cursor:hand"/>
<input type="hidden" name="id" id="channel_up_id" value=""/>
</form>
</div>
<%--
<div id="shsp_dialog_batch" title="批量添加">
新增：(用逗号隔开)
<textarea cols="40" id="channel_batch" name="channel_batch" rows="10"></textarea>
<input type="text" name="channel_batch" id="channel_batch" value="" style ="width:200px;cursor:hand"/><br/>
--%>
</div>
</body>
</html>
分享到：
相关推荐
在本主题中，我们将深入探讨如何使用jQuery模拟JGrid实现分页列表显示。JQuery是一个广泛使用的JavaScript库，它提供了丰富的功能，包括DOM操作、事件处理、动画效果以及与Ajax的交互。而JGrid则是一个基于jQuery的...
- `ismbb`是一个布尔变量，如果为真，则特定列（如“remession”）将被添加到显示列表中。 - 根据`dtspatten`的值，某些列（如“feature”和“module”）的显示状态会有所不同。 3. **动态列集合生成：** - 通过...
1. **ASP.NET MVC** 或 **Web Forms**：这两种.NET开发框架都可以用来构建Web应用，它们都支持与jGrid的集成。 2. **数据绑定**：jGrid可以通过AJAX从服务器获取数据，也可以通过服务器端绑定实现数据加载。 3. **C#...
1. **jGrid**：这是一个流行的JavaScript库，用于创建交互式的HTML表格，类似于jQuery UI的DataTable或AngularJS的UI Grid。它支持多种功能，包括分页、排序、搜索以及我们讨论的重点——全选和记忆勾选。 2. **...
- **作用**：获取当前`grid`中所有数据的ID列表。 10. **getGridParam(name)** - **作用**：获取`jqGrid`的参数信息。 - **参数**：`name` - 参数名。 11. **getInd(rowid[, rowcontent])** - **作用**：...
##### 1. 函数定义 ```javascript function pageInit() { // ... } ``` 这里定义了一个名为`pageInit`的函数，通常会在页面加载完成后调用此函数来初始化`jqGrid`。 ##### 2. 初始化`jqGrid` ```javascript ...
4. 分页设置："gridview"、"pager"参数用于开启分页功能，" rowNum"、"rowList"分别设定每页显示的行数和可供选择的行数列表。 5. 排序："sortname"和"sortorder"用于设定初始排序的列名和顺序，"sorttype"则定义列...
适用于需要展示复杂数据列表、数据管理界面的场景，如后台管理系统、数据分析平台等。 **配置与使用**： - 需要在页面中定义一个表格元素，然后使用jqGrid的方法初始化，传入数据源、列定义、分页设置等参数。 - ...
1. **表单验证 - formvalidator** 表单验证是Web应用中不可或缺的部分，它确保用户输入的数据符合预设的规则和格式。`formvalidator`插件为jQuery提供了强大的表单验证功能，可以轻松实现对输入数据的有效性检查。...
"基于jqgrid实现树形菜单分页列表查询"这一主题，旨在创建一个既能展示层级结构又能进行高效分页查询的表格组件。jqGrid是一款强大的jQuery插件，它提供了丰富的功能，如数据网格、分页、排序、过滤、编辑等，同时...
1. **数据展示**：jqGrid能够处理大量数据，通过网格形式展示，使得数据清晰易读。用户可以自定义列的宽度、标题和样式，以适应不同的需求。 2. **Ajax异步通信**：jqGrid支持通过Ajax方式从服务器获取数据，实现了...
这时，我们就需要动态获取表格的列和列字段，以便于创建一个列表供用户选择，让他们可以自由勾选哪些列显示在表格中。 2. **实现源码**： 实现动态获取列和列字段的方法，通常需要结合jqGrid的API来进行操作。以下...
jqGrid 是一个用来显示网格数据的jQuery插件，文档比较全面... 新闻信息列表 <script src="js/jquery.min.js" type="text/javascript"> <script src="js/jquery-ui-1.8.2.custom.min.js" type="text/javascript"> ...
例如，在搜索功能中，可以通过配置 $.jgrid.search 来定制搜索界面的文字显示。这里的示例展示了基本的搜索文本，包括标题、查找、重置等选项，以及支持的搜索条件（如等于、不等于、包含等）。 **2. colModel 设置...