方式一：

<!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. 有人提了一个问题：一定要RESTful吗？

    写在前面的话 这个问题看起来就显得有些萌,或者说类似的问题都有些不靠谱,世上哪有那么多一定的事情,做开发都不一定做多久呢,所以说如果你有这个疑问的话是真真有点儿不着调,不过可能也就是随口一问吧,没有深 ...

  2. (转载)RESTful架构风格下的4大常见安全问题

    转载自<RESTful架构风格下的4大常见安全问题>,作者:马伟 伴随着RESTful架构风格的大量应用微服务架构的流行,一些本来难以察觉到的安全问题也逐渐开始显现出来.在我经历过的各种采 ...

  3. 测试String.Format中的Format参数

    DateTime datetime = DateTime.Now; Console.WriteLine(String.Format("{0:d}", datetime)); // ...

  4. win10 uwp 切换主题

    本文主要说如何在UWP切换主题,并且如何制作主题. 一般我们的应用都要有多种颜色,一种是正常的白天颜色,一种是晚上的黑夜颜色,还需要一种辅助的高对比颜色.这是微软建议的,一般应用都要包含的颜色. 我们 ...

  5. Windows历史

    1983年11月:Microsoft宣布Windows的第一个版本:以字符为基础 的窗口系统: 1985年11月:Windows1.0: 1990年5月:Windows 3.0(成功版本),16位OS ...

  6. Redis 学习笔记-入门

    Redis特点: 1.速度快 2.支持丰富的数据类型:字符串.哈希列表.集合 3.操作具有原子性,所有Redis操作都是原子操作 4.多实用工具,可应用如缓存,消息队列,应用程序中任何短期数据,如we ...

  7. Spring IOC（四）总结

    目录 1.spring容器中Bean生命周期 2.IOC容器中核心接口 3.IOC容器启动流程 4.IOC依赖注入流程 =============正文分割线================== Spr ...

  8. tomcat启动报错Several ports (8080, 8009) required by Tomcat v6.0

    tomcat启动报错 如下图: 问题:8080.8009端口已经被占用. 解决办法: 1.在命令提示符下,输入netstat -aon | findstr 8080 2.继续输入taskkill -F ...

  9. Lua中metatable和__index的联系

    Lua中metatable和__index的联系 可以参考 http://blog.csdn.net/xenyinzen/article/details/3536708 来源 http://blog. ...

  10. (2017浙江省赛E）Seven Segment Display

    Seven Segment Display Time Limit: 2 Seconds      Memory Limit: 65536 KB A seven segment display, or ...