index.jsp 页面
<%@ page language="java" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.ddd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <base href="<%=basePath%>" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- easyui配置 --> <link rel="stylesheet" href="script/themes/default/easyui.css" type="text/css" /> <link rel="stylesheet" href="script/themes/icon.css" type="text/css" /> <script type="text/javascript" src="script/jquery.min.js"></script> <script type="text/javascript" src="script/jquery.easyui.min.js"></script> <script type="text/javascript" src="script/easyui-lang-zh_CN.js"></script> <!-- book的Css和JS --> <link rel="stylesheet" href="style/book.css" type="text/css" /> <script type="text/javascript" src="script/book.js"></script> <title>书籍操作</title> </head> <body> <div id="main"> <table id="bookbody"> </table> </div> <!-- 编辑数据的div,默认看不到 --> <div id="divEdit"> <div id="tabEdit"> <form id="frmEdit" method="post"> <input type="hidden" id="id" name="book.id" /> <dl> <dd> ISBN: </dd> <dd> <input type="text" size="15" id="isbn" name="book.isbn" /> </dd> </dl> <dl> <dd> 书名: </dd> <dd> <input type="text" size="40" id="title" name="book.title" /> </dd> </dl> <dl> <dd> 价格¥: </dd> <dd> <input type="text" size="10" id="price" name="book.price" /> </dd> </dl> <dl> <dd> 出版日期: </dd> <dd> <input type="text" style="width: 150px" id="pubdate" name="book.pubdate" /> </dd> </dl> <dl> <dd> 简介: </dd> <dd> <textarea cols="45" rows="3" id="intro" name="book.intro"></textarea> </dd> </dl> </form> </div> </div> </body> </html>
book.css 样式
/* CSS Document */ #divEdit { display: none; } * { font: 12px Arial; } div#main { margin: 0px auto; width: 600px; } #tabEdit input[type="text"],#tabEdit textarea { border: solid #66ccff 1px; } #tabEdit dl { padding-right: 35px; }
book.js 脚本
// jQuery 起点 $(function(){ //加载所有的书籍 listBook(); //日期加上日期控件 $("#pubdate").datebox({ required:true }); //给文本框加上验证器 $("#isbn").validatebox({ required:true }); //书名的验证 $("#title").validatebox({ required:true, missingMessage:'书名不能为空' }); //价格用货币验证框 $("#price").numberbox({ required:true, min:5.5, max:9999, precision:2, missingMessage:'请输入价格' }); //简介加验证 $("#intro").validatebox({ required:true }); }); //显示所有的书籍列表 function listBook(){ $("#bookbody").datagrid({ whidth:600, height:"auto", iconsCls:'icon-help',//表格左上角的图标样式 title:'显示所有书籍',//表格标题 url:'list.action',//访问服务器的地址,要求返回 JSON 对象 rownumbers:true,//在最前面显示行号 fitColumns:true,//自动适应列宽 pagination:true,//在底部显示分页工具栏 striped:true,//隔行变色 singleSelect:true,//每次只选中一行 loadMsg:'加载书籍列表,请稍候...', pageSize:5,//指定每页的大小,服务器要加上 page 属性和 total 属性 remoteSort:true,//从服务器端排序,默认 true pageList:[3,5,10],//可以设置每页记录数的列表,服务器要加上 rows 属性 idField:'id',//主键属性 toolbar:[{//工具栏 text:'添加', iconCls:'icon-add',//图标 handler:function(){//处理函数 addBook(); } },{ text:'删除', iconCls:'icon-cancel',//图标 handler:function(){//处理函数 deleteBook(); } },{ text:'编辑', iconCls:'icon-edit',//图标 handler:function(){//处理函数 editBook(); } }], columns:[[{//注意 2 个中括号 field:'isbn',//实体类属性 title:'ISBN',//显示的列标题 width:70 },{ field:'title', title:'书籍名称', //可以排序,但服务器也完成相应的代码,要加入 sort 和 order 属性 sortable:true },{ field:'price', title:'价格', align:'right', width:60, sortable:true, formatter:function(value){ return "$"+value; }, styler:function(value,row,index){//自定义单元格样式 if(value<80){ return 'color:red;'; } } },{ field:'pubdate', title:'出版日期', sortable:true, formatter:function(value){ return value.substring(0,10); } }]] }); }; //显示添加/编辑窗口 function showEditForm(){ $("#tabEdit").dialog({ modal:true,//模式窗口 title:'书籍操作', iconCls:'icon-save', buttons:[{ text:'确认', handler:function(){ //进行表单字段验证,当全部字段都有效时返回 true 和 validatebox 一起使用 if($("#tabEdit").form('validate')){ //提交到服务器并写入数据库 dealSave(); //关闭窗口 colseForm(); }else{ $.messager.alert('验证','书籍信息有误或不完整','error'); } } },{ text:'取消', handler:function(){ colseForm(); } }] }); } //关闭窗口 function colseForm(){ $("#frmEdit").form('clear'); $("#tabEdit").dialog('close'); } //添加的函数 function addBook(){ //清空原有的数据 $("#frmEdit").form('clear'); //显示添加对话 showEditForm(); } //删除书籍 function deleteBook(){ var book = $("#bookbody").datagrid('getSelected');//得到选中的一行数据 //如果没有选中记录 if(book == null){ $.messager.alert('删除','请先选中要删除的书籍','info'); return; } $.messager.confirm('确认','真的要删除选中的记录吗',function(r){ if(r){ var url='deleteBook.action?book.id='+book.id; //试一下 get 方法(地址,回调函数) $.get(url,function(operateSuccess){ if(operateSuccess){ $.messager.alert('删除','选中的书籍成功删除','info'); //清除选中 $("#bookbody").datagrid('unselectAll'); //重新加载 $("#bookbody").datagrid('reload'); }else{ $.messager.alert('删除','删除失败','warning'); } }); } }); } //在增加和更新时点确定按钮的处理函数 function dealSave(){ //表单数据序列化一个字符串用 & 拼接 var params = $("#frmEdit").serialize(); //得到 ID 值,为空串表示添加 if($("#id").val() == ""){ $.post("addBook.action",params,function(operateSuccess){ if(operateSuccess){ $("#bookbody").datagrid("reload");//重新加载 $.messager.alert('添加','添加成功','info'); }else{ $.messager.alert('添加','添加出现问题!','info'); } }); }else{ //表示更新 $.post("updateBook.action",params,function(operateSuccess){ if(operateSuccess){ $("#bookbody").datagrid("reload");//重新加载 $.messager.alert('更新','更新成功','info'); }else{ $.messager.alert('更新','更新出现问题!','info'); } }); } } //编辑按钮的操作 function editBook(){ var book = $("#bookbody").datagrid('getSelected');//得到选中的一行数据 //如果没有选中记录 if(book == null){ $.messager.alert('书籍','请先选中要编辑的书籍','info'); return; } $("#frmEdit").form('clear'); //填充数据 $("#id").val(book.id); $("#isbn").val(book.isbn); $("#title").val(book.title); //赋值方法不同 $("#price").numberbox("setValue",book.price); //给默认方法不同 $("#pubdate").datebox("setValue",book.pubdate.substring(0,10)); //给默认值 $("#intro").val(book.intro); //显示编辑页面 showEditForm(); }
效果图:
相关推荐
flex3(remoteobject+datagrid+.....)+java+oracle源代码
struts2+ajax+easyui+json+datagrid增,删,改,查,分页,排序,有数据库
该文件是用来将easyui-datagrid按照格式导出到excel中,可以将合并的单元格,复杂的表头,背景色及字色等按照显示的样式导出到excel,即所见即所得
jeasyui-datagrid-datagrid2.zip jeasyui-datagrid-datagrid2.zip jeasyui-datagrid-datagrid2.zip jeasyui-datagrid-datagrid2.zip jeasyui-datagrid-datagrid2.zip
使用maven插件管理jar包 采用struts2+easyui 实现可编辑表格datagrid
支持datagrid扩展,在一条记录下面可以嵌套一个子datagrid,切记要在页面中引入该js
struts2+easyUI+ajax+json用户登验证,代码没问题,可运行,适合初学者理解原理!
jeasyui-datagrid-datagrid 开发参考
System.Windows.Controls.DataGrid DataGrid = dataGrid1; string file = "C:Users\\Administrator\\Desktop\\qb"; Export(DataGrid, file); } public static void Export(System.Windows.Controls.DataGrid...
DataGrid1.mxmlDataGrid1.mxmlDataGrid1.mxml
easyui+springMVC+hibernate练习,实现为课程表。
WPF结合MVVM绑定Datagrid,网上凑了很久才搞定,发现很多都是有问题的,终于解决了。用vs2019打开最好。里面实现了增加、删除、修改、以及单击之后显示数据。
easyui datagrid 各种视图view
easyui使用detailview创建子网格数据所需的datagrid-detailview.js
一、源码描述 此开发框架为免费开源的开发框架,会不断更新版本,旨在征集开源爱好者... 2、默认数据库连接字符串在webconfig配置文件中修改。 3、 此版本完全开源,不收任何费用,可以任用于商业,但要保留版权信息。
附件中包含示例页面,需要引用以下几个js <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"> ... <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
DataGrid JS javascript.DataGrid JS javascriptDataGrid JS javascript
datagrid-cellediting.js