ligerui_实际项目_003：form中添加数据，表格(grid)里面显示，最后将表格(grid)里的数据提交到servlet

实现效果：

"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的更多相关文章

RDLC中添加参数，用来显示报表中数据集之外的信息。
我添加了两个参数,首先后台: ReportParameter rp = ,,).ToString()); ReportParameter rp1 = new ReportParameter(" ...
Jmeter+Jenkins的HTML报告中添加QPS、90%栏目显示
1.进入jmeter/extras目录,修改 jmeter-results-detail-report_21.xsl 2.打开文件在summary部分修改如下: 在pagelist部分修改如下: ...
在Fiddler中添加自己所需的显示列
有时候我们想了解请求响应的时间.服务器IP等相关信息,Fiddler默认是没有显示的,这个时候就需要我们借助高级用法---自定义显示列, 其实主要就是操作这个文件Fiddler2\Scripts\Cu ...
c# 在datagridview中添加comboboxcolumn 绑定数据库读取显示数据
datagridview中的comboboxcolumn 从绑定的数据库中读取显示时,只需要注意一点,就是sql语句加个 CStr() 字符串转换函数即可,如下: SELECT CStr(XXX) a ...
springboot在工具类中添加service的方法，显示为空的解决方案
@Component// 1.将工具类声明为spring组件,这个必须不能忘 public class TestUtils { //2.自动注入 @Autowired private ItemServ ...
maven项目中添加Tomcat启动插件
在pom.xml文件中添加如下配置:  <build> <plugins> <plugin> ...
Yii2在Form中处理短信验证码的Validator，耦合度最低的短信验证码验证方式
短信验证码在目前大多数web应用中都会有,本文介绍一个基于Yii2 Validator方式的验证码验证方式. 在其他文章中看到的方式大多比较难做到一次封装,多次重用. 使用此方式的好处自然不用多说,V ...
FORM中使用onSubmit="return false"防止表单自动提交，以及submit和button提交表单的区别
在页面中有多个input type="text"的文本输入框的情况下没有问题,但是当页面中有只有一个文本框的情况下(),就会出现此问题. 后来在form 中添加:onsubmit= ...
为Form中的控件增加自适应功能转
创建一个基于Custom的类resizeable,并新建属性和方法程序,其说明如下: a) 新建属性: posiTyperList 可调整位置的控件类型列表sizeTypeList 可调整大小的控件类 ...

随机推荐

myeclipse调式与属性显示
最近做项目的时候发现一个奇怪的东西,当我用myeclipse调式时,调式窗口显示实体user所关联的role的对象属性是空的,但是,从syst打印出来是有的,最近感到很奇怪,后来发现这只是调式的一种显 ...
在VC6.0中编译头文件时产生moc文件
1.在FileView视图中右键点击需要产生moc文件的头文件(就是类中包含Q_OBJECT宏,如果没有这个宏就不需要产生moc文件) 2.在右键菜单中选择Setting... 3.选择Custom ...
如何迁移测试的MAGENTO到正式运行的MAGENTO
或者这个题目叫做如何改变MAGENTO的运行目录第一,我们需要在PHPMYADMIN备份整个MAGENTO的数据.备份数据并且存为.SQL. 在这儿假设你的测试网站在http://dev.site. ...
OceanBase架构浅析（二）
单点性能 OceanBase架构的优势在于既支持跨行跨表事务,又支持存储服务器线性扩展.当然,这个架构也有一个明显的缺陷:UpdateServer单点,这个问题限制了OceanBase集群的整体读写性 ...
LeetCode Game of Life
原题链接在这里:https://leetcode.com/problems/game-of-life/ 题目: According to the Wikipedia's article: " ...
Oracle中根据 file# 和 block# 找到对象
我们在10046生产的trace 文件里经常看到下面的信息. 表示系统在等待散列读取某个文件号的某个块开始的8个块. WAIT #6: nam='db file scattered read' ela ...
ESXI
ESXI设置时间 esxi设置时间命令:Usage: esxcli system time set [cmd options] Description: set ...
(copy) Linux Commands Cheat Sheet in Black & White
source: http://linoxide.com/linux-command/linux-commands-cheat-sheet/
android自动填写短信验证码
广播类 package com.examp.azuoyoutong.listner; import java.util.regex.Matcher;import java.util.regex.Pat ...
红帽Linux 配置VNC桌面远程工具
1.先确认VNC是否安装默认情况下,Red Hat Enterprise Linux安装程序会将VNC服务安装在系统上. 使用rpm命令检查是否安装了vnc,如果安装了就显示软件名称: [root@ ...

ligerui_实际项目_003：form中添加数据，表格(grid)里面显示，最后将表格(grid)里的数据提交到servlet

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

随机推荐

热门专题