方式一：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>DEMO</title>
<%
    String basePath = request.getContextPath();
%>
<link rel="stylesheet" type="text/css" href="/res/jquery-ui-1.12.1.custom/jquery-ui.min.css" />
<link rel="stylesheet" type="text/css" href="/res/jquery-ui-1.12.1.custom/jquery-ui.theme.min.css" />
<link rel="stylesheet" type="text/css" href="/res/Guriddo_jqGrid_JS_5.2.1/css/ui.jqgrid-bootstrap-ui.css" />
<link rel="stylesheet" type="text/css" href="/res/Guriddo_jqGrid_JS_5.2.1/css/ui.jqgrid.css" />
</head>
<body>
<div class="main" id="main">
<!--jqGrid所在-->
<table id="grid-table"></table>
<!--jqGrid 浏览导航栏所在-->
<div id="grid-pager"></div>
</div>
<script src="/res/js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/res/Guriddo_jqGrid_JS_5.2.1/js/i18n/grid.locale-cn.js" type="text/javascript" charset="utf-8"></script>
<script src="/res/Guriddo_jqGrid_JS_5.2.1/js/jquery.jqGrid.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var grid_selector = "#grid-table";
var pager_selector = "#grid-pager";
$(document).ready(function() {
$("#grid-table").jqGrid({
url:'<%=basePath%>/sys/list',
data: [], //当 datatype 为"local" 时需填写
datatype: "json", //数据来源，本地数据（local，json,jsonp,xml等）
height: 150, //高度，表格高度。可为数值、百分比或'auto'
mtype:"post",//提交方式
colNames: ['编号', '权限码', '权限名称'],
colModel: [{
name: 'id',
index: 'id', //索引。其和后台交互的参数为sidx
key: true, //当从服务器端返回的数据中没有id时，将此作为唯一rowid使用只有一个列可以做这项设置。如果设置多于一个，那么只选取第一个，其他被忽略
width: 100,
editable: false,
editoptions: {
size: "20",
maxlength: "30"
}
}, {
name: 'code',
index: 'code',
width: 200, //宽度
editable: true, //是否可编辑
edittype: "select", //可以编辑的类型。可选值：text, textarea, select, checkbox, password, button, image and file.s
editoptions: {
value: ""
}
}, {
name: 'name',
index: 'name',
width: 60,
sorttype: "double",
editable: true
}],
viewrecords: false, //是否在浏览导航栏显示记录总数
rowNum: 10, //每页显示记录数
rowList: [10, 20, 30], //用于改变显示行数的下拉列表框的元素数组。
pager: pager_selector, //分页、按钮所在的浏览导航栏
altRows: true, //设置为交替行表格,默认为false
//toppager: true,//是否在上面显示浏览导航栏
multiselect: true, //是否多选
//multikey: "ctrlKey",//是否只能用Ctrl按键多选
multiboxonly: true, //是否只能点击复选框多选
// subGrid : true,
sortname:'id',//默认的排序列名
sortorder:'asc',//默认的排序方式（asc升序，desc降序）
caption: "权限表", //表名
autowidth: true //自动宽
});
//浏览导航栏添加功能部分代码
$(grid_selector).navGrid(pager_selector, {
search: true, // 检索
add: true, //添加 （只有editable为true时才能显示属性）
edit: true, //修改（只有editable为true时才能显示属性）
del: true, //删除
refresh: true //刷新
}, {}, // edit options
{}, // add options
{}, // delete options
{
multipleSearch: true
} // search options - define multiple search
);
});
</script>
</body>
</html>

方式二：

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<%
    String basePath = request.getContextPath();
%>
<link rel="stylesheet" type="text/css" href="<%=basePath%>/res/jquery-ui-1.12.1.custom/jquery-ui.min.css" />
<link rel="stylesheet" type="text/css" href="<%=basePath%>/res/jquery-ui-1.12.1.custom/jquery-ui.theme.min.css" />
<link rel="stylesheet" type="text/css" href="<%=basePath%>/res/Guriddo_jqGrid_JS_5.2.1/css/ui.jqgrid-bootstrap-ui.css" />
<link rel="stylesheet" type="text/css" href="<%=basePath%>/res/Guriddo_jqGrid_JS_5.2.1/css/ui.jqgrid.css" />
</head>
<style type="text/css">
    table td,th{
        border:1px solid #aaa;
    }
</style>
<body>
<label>学号：</label><input type="text" id="name_"/><button onclick="search();">查询</button>
    <table id="list"></table>
    <div id="pager"></div>
    
<script src="<%=basePath%>/res/js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="<%=basePath%>/res/Guriddo_jqGrid_JS_5.2.1/js/i18n/grid.locale-cn.js" type="text/javascript" charset="utf-8"></script>
<script src="<%=basePath%>/res/Guriddo_jqGrid_JS_5.2.1/js/jquery.jqGrid.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
        $(function(){
            $("#list").jqGrid({
                datatype: "json",
                url:'<%=basePath%>/sys/list?q=1',
                mtype:'POST',
                height: 350,
                autowidth: true,
                shrinkToFit: true,
                rownumbers:true,
                rowNum: 100,
                rowList: [100, 200, 500],
                colModel:[
                       {name:'id',index:'id',label:'id',hidden:true,editable : true},
                       {name:'code',index:'code',label:'权限码',editable : true},
                       {name:'name',index:'name',label:'名称',editable : true},
                       {name:'oper',index:'oper',label:'操作',editable : true,formatter:function(cellvalue,options,rowObject){
                           return rowObject.id=='add'?cellvalue:'<a href="javascript:del('+rowObject.id+');" style="color:red">删除</a>';
                               
                       }}
                   ],
                jsonReader : {
                    root : "list",
                    total: "total",
                    records: "records"
                },
                sortable:false,
                sortname:'id',
                sortorder:'desc',
                pager: "#pager",
                viewrecords: true,
                caption: "",
                hidegrid: false,
                beforeRequest:function(){
                    var rules = new Array();
                    var name = $.trim($('#name_').val());
                    if(name!=''){
                        rules.push({'field':'name','op':'seq','data':name});
                    }
                    var postData = $('#list').getGridParam('postData');
                    var filters = {groupOp:'AND',rules:rules};
                    postData.filters=JSON.stringify(filters);
                },loadComplete:function(){
                    var data = {
                            id:'add',
                            code:'<input type="text" id="code"/>',
                            name:'<input type="text" id="name"/>',
                            oper:'<a href="javascript:add();">添加</a>'
                    }
                    $('#list').addRowData('add',data,'first');
                }
            });
        });
        
        function search(){
            $('#list').setGridParam({page:1}).trigger('reloadGrid');
        }
        
        function add(){    
            var code = $('#code').val();
            var name = $('#name').val();
            $.post('<%=basePath%>/sys/add',{code:code,name:name},function(operResult){
                if(operResult.result){
                    $('#list').trigger('reloadGrid');
                    alert(result.msg);
                    
                }else{
                    alert(result.msg);
                }
            });
        }
        
        function del(id){
            $.post('<%=basePath%>/sys/delete',{id:id},function(operResult){
                if(operResult.result){
                    $('#list').trigger('reloadGrid');
                    alert('删除成功！');
                    
                }else{
                    alert('删除失败！');
                }
            });
        }
    </script>
</body>
</html>

jqGrid数据表格的更多相关文章

  1. jqGrid多级表格的实现

    原博主链接:http://blog.csdn.net/dreamstar613/article/details/54616503 jqGrid多级表格(可N级) 主要用的方法: subGridRowE ...

  2. 数据表格 - DataGrid - 查询

    toolbar头部工具栏 <script type="text/javascript"> $(function () { $("#datagrid" ...

  3. ASP.NET 导出数据表格

    功能:可以实现导出整个数据表格或整个页面 public bool ExportGv(string fileType, string fileName)        {            bool ...

  4. 数据表格datagrid内容整理

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  5. treeGrid树形数据表格的json数据格式说明

    在使用easyUI 的treeGrid的时候,很多时候我们从数据库取出来的数据treeGrid却不能读取显示成一个树:如下 { menuCode: "a00", menuName: ...

  6. easyui 折叠数据表格使用

    因为要用到折叠数据表格 但是官网上的例子不能展示 费了好大劲 走了很多弯路 现在能显示出数据 以前大多都是看别人写的文章 自己解决问题的时候几乎没记录过 现在想想真不是好习惯 特此记录分享出来 有需要 ...

  7. Easyui数据表格-地区列表及工具栏增删改

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  8. [转] easyui 获取数据表格中选中行的数据 Get selected row data from...

    原文地址:http://my.oschina.net/meSpace/blog/41463 http://www.easyui.net/2010/06/easyui-tutorial-get-sele ...

  9. JQuery Easy Ui dataGrid 数据表格

    数据表格 - DataGrid 英文文档:http://www.jeasyui.com/documentation/index.php# 继承$.fn.panel.defaults,使用$.fn.da ...

随机推荐

  1. 提纲挈领webrtc之NS(noise suppression)模块

    Noise suppression,就是大家说的降噪.这种降噪是把人声和非人声区分开来,把非人声当成噪声. 一段包含人声和噪声的音频经过该模块处理,从理论上讲,只剩下人声了. webrtc的NS在业内 ...

  2. hadoop之 hadoop 2.2.X 弃用的配置属性名称及其替换名称对照表

    Deprecated Properties  弃用属性 The following table lists the configuration property names that are depr ...

  3. asp.net C# 实现阿里大鱼和云片网短信接口类

    云片网短信通用类 public class YunpianSMS { public YunpianSMS() { } /// <summary> /// 服务器HTTP地址 /// < ...

  4. Javascript中NaN、null和undefinded的区别

    var a1; var a2 = true; var a3 = 1; var a4 = "Hello"; var a5 = new Object(); var a6 = null; ...

  5. PhiloGL学习（6）——深情奉献：快乐的一家

     前言 话说上一篇文章结尾讲到这一篇要做一个地球自转以及月球公转的三维动画,提笔,不对,是提键盘开始写的时候脑海中突然出现了几年前春晚风靡的那首歌:蒙古族小丫头唱的快乐的一家.闲言莫提,进入正题.   ...

  6. python函数说明内容格式错误

    def levlTwo(levloneList,levlOneNum): """ 入参levloneList 一级城市列表 入参levlOneNum 用户选择的城市序号 ...

  7. OpenCV4Android背景建模（MOG、MOG2）

    本文为作者原创,转载请注明出处(http://www.cnblogs.com/mar-q/)by 负赑屃     很久以前的笔记了,分享给大家吧...OpenCV4Android中用于背景建模的类主要 ...

  8. hadoop2的mapreduce操作hbase数据

    1.从hbase中取数据,再把计算结果插入hbase中 package com.yeliang; import java.io.IOException; import org.apache.hadoo ...

  9. Java开发必装的IntelliJ IDEA插件

    IDEA 插件简介 常见的IDEA插件主要有如下几类: 常用工具支持 Java日常开发需要接触到很多常用的工具,为了便于使用,很多工具也有IDEA插件供开发使用,其中大部分已经在IDEA中默认集成了. ...

  10. Windows解决anaconda下双python版本安装TensorFlow

    首先,就是双版本anaconda的安装: 以前安装好的是python2.7版本,而TensorFlow的安装仅支持3.5版本的.但是自己本来的2.7版本又不想遗弃.所以安装双版本的: 在anacond ...