实现效果:

"Form"中填写数据,向本页"Grid"中添加数据,转换成Json数据提交,计算总和,Grid文本框可编辑,排序

图片效果:

总结:

//display属性:
      editor:grid表格可以编辑其类容:
//select类型:select+render实现选择填充效果
       editor:{
          type:"select",
          data:[{id:"",text:"品牌一"},{id:"",text:"品牌二"}],
          valueField :"id",
          textField:"text"
      }
       render:function(item){
                if(item.pBrand=='1'){
return "品牌一";
}else{
return "品牌二";
}
}
//display属性:
//String类型:
      editor:{
        type:"string"
      }
//display属性:
//render:改变显示值
render:function(item){
if(item.pBrand==''){
return "品牌一";
}else{
return "品牌二";
}
}
//display属性:
//totalSummary:计算总数量
         //先添加:“合计”这两个字
         {display:"配件型号",name:"pModel",isAllowHide:false,align:"left",width:140,
editor:{type:"string"} ,
totalSummary:{
render:function(){
return "<span id='heji'>合计:</span>";
},
align:"right"
}
},

    //合计数量
    {display:"数量",name:"nums",type:"int",isAllowHide:false,align:"left",width:80,
      editor:{type:"spinner"},
      totalSummary:{
      //type:'sum,count,max,min,avg'
      render:function(suminf,column){
      return "<span style='color:red'>数量:"+suminf.sum+"</span>";
        }
      }
    },

{
display: '序号', //表头列显示的文本,支持html
//表头内容自定义函数
headerRender: function (column) {
return "<b>" + column.display + "</b>";
},
name: 'id', //单元格映射的行数据属性
align: 'center', //单元格内容对齐方式:left/center/right
hide: false, //是否隐藏
width: 100, //列的宽度
minWidth: 50, //列的最小宽度
isSort: true, //是否允许此列排序,默认为允许排序
isAllowHide: true, //是否允许隐藏,如果允许,将会出现在【显示/隐藏列右键菜单】
type: 'string', //类型,用于排序
//自定义单元格渲染器
render : function (record, rowindex, value, column) {
//this 这里指向grid
//record 行数据
//rowindex 行索引
//value 当前的值,对应record[column.name]
//column 列信息
return value; //返回此单元格显示的HTML内容(一般根据value和row的内容进行组织)
},
//列汇总
totalSummary: {
align: 'center', //汇总单元格内容对齐方式:left/center/right
type: 'count', //汇总类型sum,max,min,avg ,count。可以同时多种类型
render: function (e) { //汇总渲染器,返回html加载到单元格
//e 汇总Object(包括sum,max,min,avg,count)
return "<div>总数:" + e.count + "</div>";
}
},
//单元格编辑器
editor: {
type: 'text'
},
//多表头支持
columns: null
},
//自动排序效果:
g=$("#maingrid").ligerGrid({
usePage:true;//排序,浏览器排序
});
//计算“数量*价格”
//利用totalSummary:不同列,相乘
{display:"数量",name:"nums",type:"int",isAllowHide:false,align:"left",width:80,
editor:{type:"spinner"},
totalSummary:{
//type:'sum,count,max,min,avg'
render:function(suminf,column){
return "<span style='color:red'>数量:"+suminf.sum+"</span>";
}
}
},
{display:"单价",name:"price",type:"float",isAllowHide:false,editor:{type:"float",minValue:"0"},
align:"left",width:80,
render:function(item){
return formatCurrency(item.price);
}
},
{display:"金额",name:"numsPrice",type:"float",isAllowHide:false,
align:"left",width:90,
render:function(item){
var money = item.nums*item.price;
return formatCurrency(money);
},
totalSummary:{
render:function(suminf,column){
return "<span id='totalPrice'>"+formatCurrency(suminf.sum)+"</span>";
},
algin:"left"
}
},
//客户端封装成Json字符串数组,提交,可减少服务器压力
function doSave(){
var data= g.getData();
$("#jsonStr").val(JSON.stringify(data));
alert("Json字符串:"+JSON.stringify(data));
$("form").submit();
}

实现代码:

1:编写PO类:

package com.west.study.servlet;
/**01:创建PO类*/
public class Person {
private String pname;
private String pBrand;
private String pModel;
private String nums;
private String price;
private String numsPrice;
private String remarks; public String getPname() {
return pname;
}
public void setPname(String pname) {
System.out.println("setPname"+pname);
this.pname = pname;
}
public String getpBrand() {
return pBrand;
}
public void setpBrand(String pBrand) {
this.pBrand = pBrand;
}
public String getpModel() {
return pModel;
}
public void setpModel(String pModel) {
this.pModel = pModel;
}
public String getNums() {
return nums;
}
public void setNums(String nums) {
this.nums = nums;
}
public String getPrice() {
return price;
}
public void setPrice(String price) {
this.price = price;
}
public String getNumsPrice() {
return numsPrice;
}
public void setNumsPrice(String numsPrice) {
this.numsPrice = numsPrice;
}
public String getRemarks() {
return remarks;
}
public void setRemarks(String remarks) {
this.remarks = remarks;
}
}

2:编写界面:grid_edit.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<link href="<%=request.getContextPath()%>/ui/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="<%=request.getContextPath()%>/ui/lib/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/ui/lib/ligerUI/js/core/base.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/ui/lib/ligerUI/js/plugins/ligerGrid.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/ui/lib/ligerUI/js/plugins/ligerTextBox.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/ui/lib/ligerUI/js/plugins/ligerDateEditor.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/ui/lib/ligerUI/js/plugins/ligerForm.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/ui/lib/ligerUI/js/plugins/ligerComboBox.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/ui/lib/ligerUI/js/plugins/ligerSpinner.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/ui/lib/ligerUI/js/plugins/ligerDrag.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/ui/lib/ligerUI/js/plugins/ligerResizable.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/ui/lib/ligerUI/js/plugins/ligerGrid.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/ui/lib/json2.js"></script>
<script type="text/javascript">
$(function(){ $("form").ligerForm(); g=$("#maingrid").ligerGrid({
columns:[
{display:"配件名称",name:"pName",isAllowHide:false,align:"left",width:140,
editor:{type:"string"}
},
{display:"配件品牌",name:"pBrand",isAllowHide:false,align:"left",width:120,
editor:{
type:"select",
data:[{id:"1",text:"品牌一"},{id:"2",text:"品牌二"}],
valueField :"id",
textField:"text"
},
render:function(item){
if(item.pBrand=='1'){
return "品牌一";
}else{
return "品牌二";
}
}
},
{display:"配件型号",name:"pModel",isAllowHide:false,align:"left",width:140,
editor:{type:"string"}
,
totalSummary:{
render:function(){
return "<span id='heji'>合计:</span>";
},
align:"right"
}
},
{display:"数量",name:"nums",type:"int",isAllowHide:false,align:"left",width:80,
editor:{type:"spinner"},
totalSummary:{
//type:'sum,count,max,min,avg'
render:function(suminf,column){
return "<span style='color:red'>数量:"+suminf.sum+"</span>";
}
}
},
{display:"单价",name:"price",type:"float",isAllowHide:false,editor:{type:"float",minValue:"0"},
align:"left",width:80,
render:function(item){
return formatCurrency(item.price);
}
},
{display:"金额",name:"numsPrice",type:"float",isAllowHide:false,
align:"left",width:90,
render:function(item){
var money = item.nums*item.price;
return formatCurrency(money);
},
totalSummary:{
render:function(suminf,column){
return "<span id='totalPrice'>"+formatCurrency(suminf.sum)+"</span>";
},
algin:"left"
}
},
{display:"备注",name:"remarks",editor:{type:"text"},align:"left",width:250}
],
rownumbers:true,
enabledEdit:true,
isScroll:true,
onBeforeEdit: f_onBeforeEdit,
onAfterEdit: f_onAfterEdit,
//onAfterShowData: f_onAfterShowData,
usePager:false,
width:"99.7%"
});
});
var totalNums=0,totalPrice=0;
//触发编辑事件前给总价赋值
function f_onBeforeEdit(e){
totalNums-=parseInt((e.record.nums));
totalPrice-=parseFloat(formatCurrency(parseFloat(formatCurrency(e.record.price)) * parseInt(e.record.nums)));
}
function f_onAfterEdit(e){
g.updateCell('numsPrice', e.record.price * e.record.nums, e.record);
totalNums+=parseInt(e.record.nums);
totalPrice+=parseFloat(formatCurrency(parseFloat(formatCurrency(e.record.price)) * parseInt(e.record.nums))); $("#totalPrice").html(formatCurrency(totalPrice));
} function addParts(){
var rowData={
pName:"",
pBrand:"1",
pModel:"",
nums:"0",
price:"",
numsPrice:"",
remarks:""
};
g.addEditRow(rowData);
} function formatCurrency(num)
{
if (!num) return "0.00";
num = num.toString().replace(/\$|\,/g, '');
if (isNaN(num))
num = "0.00";
sign = (num == (num = Math.abs(num)));
num = Math.floor(num * 100 + 0.50000000001);
cents = num % 100;
num = Math.floor(num / 100).toString();
if (cents < 10)
cents = "0" + cents;
for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++)
num = num.substring(0, num.length - (4 * i + 3)) + ',' +
num.substring(num.length - (4 * i + 3));
return (((sign) ? '' : '-') + '' + num + '.' + cents);
} //客户端封装成Json字符串提交
function doSave(){
var data= g.getData();
$("#jsonStr").val(JSON.stringify(data));
alert("Json字符串:"+JSON.stringify(data));
$("form").submit();
}
</script>
<style type="text/css">
body {
font-size:12px;
padding:10px
}
.l-table-edit {
}
.l-table-edit-td {
padding:4px;
font-size:12px;
border:#84a0c4 1px solid
}
.l-button-submit, .l-button-test {
width:80px;
float:left;
margin-left:10px;
padding-bottom:2px;
}
</style>
</head> <body> <form name="form" id="form" action="<%=request.getContextPath() %>/main/studentServlet.action" method="post">
<table cellpadding="0" cellspacing="0" class="l-table-edit"
style="width:100%">
<input name="jsonStr" type="hidden" id="jsonStr" />
<input name="reqCode" type="hidden" id="reqCode" value="saveParts" />
<tr>
<td width="17%" align="right" class="l-table-edit-td">
<font color="#FF0000">*</font>询价编号:
</td>
<td width="27%" align="left" class="l-table-edit-td">
<input name="code" type="text" id="code" size="30" maxlength="100" ltype="text" validate="{required:true}" />
</td>
<td width="13%" align="right" class="l-table-edit-td">
<font color="#FF0000">*</font>询价日期:
</td>
<td width="43%" align="left" class="l-table-edit-td">
<input
name="addDate" type="text" id="addDate" maxlength="30" validate="{required:true}" ltype="date" />
</td> </tr>
<tr>
<td width="17%" align="right" class="l-table-edit-td">
<font color="#FF0000">*</font><a href="javascript:f_open()">供应商名:</a>
</td>
<td align="left" class="l-table-edit-td">
<input name="supplierName" type="text" id="supplierName"
size="30"
maxlength="100" ltype="text" validate="{required:true}" /> <td width="13%" align="right" class="l-table-edit-td">
联系人员:
</td>
<td align="left" class="l-table-edit-td">
<input name="contacter" type="text" id="contacter"
value="" maxlength="30" ltype="text" />
</td>
</tr>
<tr>
<td width="17%" align="right" class="l-table-edit-td">
电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话:
</td>
<td align="left" class="l-table-edit-td">
<input
name="telephone" type="text" id="telephone" value="" size="30" maxlength="50" ltype="text" />
</td> <td width="17%" align="right" class="l-table-edit-td">
传&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;真:
</td>
<td align="left" class="l-table-edit-td">
<input
name="fax" type="text" class="l-table-edit" id="fax" value="" maxlength="50" ltype="text" />
</td>
</tr>
<tr> <td align="right" class="l-table-edit-td">
备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注:
</td>
<td align="left" class="l-table-edit-td" colspan="3">
<input
name="remarks" type="text" class="l-table-edit" id="remarks" style="width:90%" value="" maxlength="200"
ltype="text" />
</td>
</tr>
</table> <br /> <input name="button_update" type="button" value="添加配件" style="width:60px" onClick="javascript:addParts()">
<input
name="button_save" type="button" value="保 存" style="width:60px" onclick="javascript:doSave();">
<!--保存提示语--> </form> <div id="maingrid" style="margin-top:20px"></div> </body>
</html>

3:编写Json的Servlet类:

package com.west.study.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map; import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; import net.sf.json.JSONArray;
import net.sf.json.JSONObject; @SuppressWarnings("serial")
public class JsonServlet extends HttpServlet {
Person person;
/** 4:doGet(),doPost(),5:web.xml */
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
System.out.println("执行:doPost(),调用doGet()");
doGet(req, resp);
} @Override
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");
String reqCode = request.getParameter("reqCode");
String message="";//servlet返回给界面的字符串
PrintWriter out = response.getWriter();
System.out.println("操作名:" + reqCode);
if(reqCode=="saveParts"||reqCode.equals("saveParts")){
message=getSaveMessage( request,response);
}
System.out.println("返回的信息:"+message);
out.write(message);
out.flush();
out.close(); } public String getSaveMessage(HttpServletRequest request,
HttpServletResponse response){
String pageJsonStr=request.getParameter("jsonStr");
System.out.println("从界面获取的jsonString"+pageJsonStr);
//将界面传入的Json字符串,封装成JsonArray
JSONArray jsonArray=JSONArray.fromObject(pageJsonStr);
//遍历JsonArray,取出JsonArray里面存储的键值对
for (Object object : jsonArray) {
//方式一:取出来的类型是:object,需要强制转换成JSONObject
JSONObject jobj=(JSONObject)object;
String pname=jobj.getString("pName");
String pBrand=jobj.getString("pBrand");
String pModel=jobj.getString("pModel");
String nums=jobj.getString("nums");
String price=jobj.getString("price");
String numsPrice=jobj.getString("numsPrice");
String remarks=jobj.getString("remarks");
System.out.println("得到的信息:名字:"+pname+":Brand:"+pBrand+":PModel:"+pModel+":nums:"+nums+":价格:"+price+":numsPrice:"+numsPrice+":remarks:"+remarks);
//方式二:将JsonObject类封装成PO(Person)类
person=(Person)JSONObject.toBean(jobj, Person.class);
System.out.println("封装成PO类:"+person.getPrice());
}
return "成功保存!";
}
}
项目下载地址:http://download.csdn.net/detail/poiuy1991719/8561811

ligerui_实际项目_003:form中添加数据,表格(grid)里面显示,最后将表格(grid)里的数据提交到servlet的更多相关文章

  1. RDLC中添加参数,用来显示报表中数据集之外的信息。

    我添加了两个参数,首先后台: ReportParameter rp = ,,).ToString()); ReportParameter rp1 = new ReportParameter(" ...

  2. Jmeter+Jenkins的HTML报告中添加QPS、90%栏目显示

    1.进入jmeter/extras目录,修改 jmeter-results-detail-report_21.xsl   2.打开文件 在summary部分修改如下: 在pagelist部分修改如下: ...

  3. 在Fiddler中添加自己所需的显示列

    有时候我们想了解请求响应的时间.服务器IP等相关信息,Fiddler默认是没有显示的,这个时候就需要我们借助高级用法---自定义显示列, 其实主要就是操作这个文件Fiddler2\Scripts\Cu ...

  4. c# 在datagridview中添加comboboxcolumn 绑定数据库读取显示数据

    datagridview中的comboboxcolumn 从绑定的数据库中读取显示时,只需要注意一点,就是sql语句加个 CStr() 字符串转换函数即可,如下: SELECT CStr(XXX) a ...

  5. springboot在工具类中添加service的方法,显示为空的解决方案

    @Component// 1.将工具类声明为spring组件,这个必须不能忘 public class TestUtils { //2.自动注入 @Autowired private ItemServ ...

  6. maven项目中添加Tomcat启动插件

    在pom.xml文件中添加如下配置: <!-- 配置tomcat插件,pom.xml里配置 --> <build> <plugins> <plugin> ...

  7. Yii2在Form中处理短信验证码的Validator,耦合度最低的短信验证码验证方式

    短信验证码在目前大多数web应用中都会有,本文介绍一个基于Yii2 Validator方式的验证码验证方式. 在其他文章中看到的方式大多比较难做到一次封装,多次重用. 使用此方式的好处自然不用多说,V ...

  8. FORM中使用onSubmit="return false"防止表单自动提交,以及submit和button提交表单的区别

    在页面中有多个input type="text"的文本输入框的情况下没有问题,但是当页面中有只有一个文本框的情况下(),就会出现此问题. 后来在form 中添加:onsubmit= ...

  9. 为Form中的控件增加自适应功能 转

    创建一个基于Custom的类resizeable,并新建属性和方法程序,其说明如下: a) 新建属性: posiTyperList 可调整位置的控件类型列表sizeTypeList 可调整大小的控件类 ...

随机推荐

  1. 500Internal Server Error

    在今晚测试wamp的项目时,当我导入一个项目到www目录下时出现如下错误:Internal Server ErrorThe server encountered an internal error o ...

  2. Linux GDB调试全面解析

    GDB是GNU开源组织发布的一个强大的UNIX下的程序调试工具,GDB主要可帮助工程师完成下面4个方面的功能: 启动程序,可以按照工程师自定义的要求随心所欲的运行程序. 让被调试的程序在工程师指定的断 ...

  3. 1001 数组中和等于K的数对

    1001 数组中和等于K的数对 基准时间限制:1 秒 空间限制:131072 KB 给出一个整数K和一个无序数组A,A的元素为N个互不相同的整数,找出数组A中所有和等于K的数对.例如K = 8,数组A ...

  4. 【C++】利用指针实现通过函数改变多个参数的值

    写惯了python,对于C++的语法越来越生疏,不同于python中函数可以return多个变量,C++的函数要想返回多个参数可以利用指针实现. 因为在函数内部的变量都是局部变量,所以当参数传入函数中 ...

  5. magento多语言中文语言包

    语言包key:http://connect20.magentocommerce.com/community/Mage_Locale_zh_CN

  6. LightOj 1098 - A New Function(求1-n所有数的因子和)

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1098 题意:给你一个数n (0 ≤ n ≤ 2 * 109),求n以内所有数的因子和, ...

  7. js实例代码

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. ionic 报错%1 is not a valid Win32 application

    Fixed the problem by installing python version 3.0 and above will do下载Python3.0或以上版本 python官网传送门:htt ...

  9. Medical image computing

    Processing and analysis of medical images using computer comprises the following: image formation an ...

  10. 智能硬件+App移动新生态【北京、广州、深圳】

    智能硬件+App移动新生态[10.24北京站] 时间:2015年10月24日13:30-16:30 地点:Wepac空间(海淀区北四环西路68号左岸工社6层) 主办:APICloud.机智云.智石科技 ...