js常用编辑方法

1.datagrid的使用

html：<table id="dg"></table>          <div id="tb" style="height:auto;padding:3px;font-size:14px">            <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="addFm()">新增</a>            <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" onClick="editFm()">编辑</a>            <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onClick="deleteFm()">删除</a>            <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" id="finish" onClick="clztFm()">处理完成</a>          </div>

js:$('#dg').datagrid({        border : 2,                         //边界为2        nowrap : false,                     //废弃禁止自动换行，即可以自动换行        fit : true,                         //自适应        singleSelect : true,                //单选一行        fitColumns : false,                 //适应多列        url : '...',                        //跳转路径        width : '350px',                    //总宽度        height : '300px',                   //总高度        toolbar : '#tb',                    //工具条（增删改）         loadMsg:'数据加载中...',            columns: [                [                    {"field":"dabh","title":"档案编号","rowspan":1},                    {"field":"name","title":"当事人","rowspan":1},                    {"field":"fmaddress","title":"罚款缴纳地点","rowspan":1},                    {"field":"fmtime","title":"罚款缴纳时间","rowspan":1},                    {"field":"jzlx","title":"建筑类型","rowspan":1},                    {"field":"fmbm","title":"处理部门","rowspan":1},                    {"field":"fmclmj","title":"罚没处理面积","rowspan":1},                    {"field":"cfje","title":"处罚金额","rowspan":1},                    {"field":"wjyt","title":"违建用途","rowspan":1},                    {"field":"id","title":"","hidden":true,"rowspan":1}                ]],            rownumbers: true,            onClickRow: function (index, row) {  //easyui封装好的时间（被单机行的索引，被单击行的值）                //需要传递的值                rowid = row["id"];            },            onLoadSuccess:function(data){       //当事件加载成功后，执行的函数                var rowdabh = data.rows[0]["dabh"];            }    });

//reload方法，参数需重传datagrid("reload",{    "year":2017})

2.ajax的使用

(1)data提交

js代码：

$.ajax({            type:"post",                        //上传请求方式（post和get）            url:"...",                          //请求路径            data:{"zdcsEntity.zdcsid":zdcsid},  //上传的参数            dataType:"json",                    //服务器返回类型            success:function(data){             //当请求响应成功时，返回data                                            //（如果data为entity，则data.bz可直接获取响应数据）                 $('#e_bz').val(data.bz);      //如果data为map类型，则data['message']                    $("#e_zdcsname").textbox('setValue', data.zdcsname);                    $('#e_zdcstype').combobox('setValue', data.zdcstype);                    $('#e_cid').val(data.cid);                    $('#e_wgid').val(data.wgid);                    $('#e_cname').val(data.cname);                    $('#e_wgname').val(data.wgname);                    $('#e_geo').val(data.geo);            }            });

java代码：

public String findbzById(){            try {                TZdcsEntity one = this.getZdcsEntity();                TZdcsEntity entity = null;                String jsonStr = "";                //DataGridZdcs dataGridZdcs=new DataGridZdcs();                List<TZdcsEntity> list =new ArrayList<TZdcsEntity>();                JSONObject object =null;                if (one != null) {                entity = tZdcsService.findEntityById(one.getZdcsid());                if(entity != null){                    GsonBuilder builder = new GsonBuilder();//创建GsonBuilder                    //builder注入Geo类型                    builder.registerTypeAdapter(Geometry.class, new GeometryTypeAdapter());                    builder.setDateFormat("yyyy-MM-dd");//builder设置日期格式                    Gson gson = builder.create();//创建builder创建gson实体类                    jsonStr = gson.toJson(entity);//将entity转成json格式的字符串                }            }                //设置response服务器返回的类型，text或json格式                response.setContentType("text/json;charset=UTF-8");                //将字符串数据写入response                ServletActionContext.getResponse().getWriter().print(jsonStr);              }catch (Exception e){                e.printStackTrace();            }            }

（2）表单提交

js代码：

$('#user_add').form({'submit',{  //form表单提交，默认上传json格式                url:"Zdcs_addTzdcsEntity.action",  //请求路径                dataType:'text',  //服务器返回类型为text格式                success:function(data){                    alert(data);                }            }   });

html前台：

<form id="user_add" method="post">                <table cellpadding="5">                    <tr>                        <td>重点场所名称:</td>                        <td style="width: 300px;">                        <input class="easyui-textbox" id="u_zdcsname" name="zdcsEntity.zdcsname" data-options="required:true" style="width: 220px"/>                        </td>                    </tr>                    <tr>                        <td>重点场所类型:</td>                        <td>                            <select id="u_zdcstype" class="easyui-combobox" name="zdcsEntity.zdcstype" style="width:220px;" data-options="required:true" editable="false" >                                <option>人口密集场所</option>                                <option>地质灾害点</option>                                <option>宗教场所</option>                                <option>河道水库</option>                                <option>安全生产重点区域</option>                            </select>                        </td>                    </tr>                    <tr>                        <td>备注:</td>                        <td><textarea style="width: 220px;height: 50px" id="u_bz" name="zdcsEntity.bz"></textarea><%--<input class="easyui-textbox" type="text" id="u_bz" name="tZdcsEntity.bz" style="width: 220px;"/>--%></td>                    </tr>                    <tr>                        <td>坐标:</td>                        <td><textarea style="width: 220px;height: 40px" id="u_geo" name="zdcsEntity.geostr"></textarea><%--<input class="easyui-textbox" type="text" id="u_bz" name="tZdcsEntity.bz" style="width: 220px;"/>--%></td>                    </tr>                </table>                <input type="hidden" id="u_cid" name="zdcsEntity.cid" />                <input type="hidden" id="u_wgid" name="zdcsEntity.wgid" />                <input type="hidden" id="u_cname" name="zdcsEntity.cname" />                <input type="hidden" id="u_wgname" name="zdcsEntity.wgname" />                <%--<input type="hidden" id="u_geo" name="zdcsEntity.geostr" />--%>            </form>

java后台：

//新增            public String addTzdcsEntity(){                try {                    TZdcsEntity one = this.getZdcsEntity();                    String jsonStr="新增失败!";                    if(one!=null){                        one.setZdcsid(GUID.create());                        Geometry geo = GeometryUtil.createGeoByWKT(one.getGeostr());                        one.setGeo(geo);                        TCEntity tcEntity=tcService.findEntityById(one.getCid());                        TWgEntity tWgEntity=twgService.findEntityById(one.getWgid());                        if(tcEntity!=null){                        one.setCname(tcEntity.getCname());                        }                        if( tWgEntity!=null){                            one.setWgname(tWgEntity.getWgname());                        }                        tZdcsService.saveEntity(one);                        jsonStr = "新增成功!";                    }                    response.setContentType("text/json;charset=UTF-8");                    ServletActionContext.getResponse().getWriter().print(jsonStr);                } catch (Exception e) {                    e.printStackTrace();                }                return null;            }

3.open窗口 （js代码）：

if(rowid != ""){                $(' #fm_isadd').val(false);                var w = screen.width/2-100;                     //定义屏幕宽度                var h = screen.height/1.2;                      //定义屏幕高度                //获取窗口的垂直位置                var iTop = (window.screen.availHeight - 30 - h)/2;                //获取窗口的水平位置                var iLeft = (window.screen.availWidth -10 - w)/2;                var s = 'width='+w+",height="+h+',top='+iTop+',left='+iLeft+',location=no,toolbar=no,menubar=no,status=yes';                var url = 'yhdzaddFmIndex.action?fmid='+rowid+'&cid='+cid;                //转义url                window.open(encodeURI(url),"_blank",s);         //打开新窗口            }else{                $.message.alert('提示','请选择要编辑的罚没记录','info');//弹出对话框，提示                return ;}

4.动态加载树

function loadGrid(nodeFid,nodeId){//nodeText为村名nodeId为村Id                var title=nodeText;                var url ="cunDrawIndex.action";                var content = '<iframe scrolling="yes" frameborder="0"  src="' + url + '" style="width:100%;height:100%;"></iframe>';                if(maintable.tabs('exists', title)) {                    maintable.tabs('update',{                        tab: maintable.tabs('getTab', title),                        options: {                            title: nodeText,                            content: content                        }                    });                    maintable.tabs('select',title);                }else {                    maintable.tabs('add', {                        title: nodeText,                        closable: true,                        content: content                    })                }            }

5.上传文件

function ajaxFileUpload(){                //设置加载图标的显示<img id="loading" src="../images/loading.gif" style="display:none;">                $('#loading').show();                //每20毫秒获取一次上传进度                //uploadProcessTimer = window.setInterval(getFileUploadProcess, 20);                $.ajaxFileUpload                ({                    url:'ajaxUploadServlet',                    secureuri:false,                    //一般设置为false，是否安全上传                    fileElementId:'fileToUpload',       //文件上传控件的id属性<input id="fileToUpload" name="file1" accept=".xls" type="file" class="input">                    dataType: 'json',                   //服务器返回值类型，设置为json                    data:{name: $('#name').val()},     //上传参数                    success: function (data, status)    //服务器成功响应处理函数                    {                        //清除定时器                        if(uploadProcessTimer) {                            window.clearInterval(uploadProcessTimer);                        }                        $('#loading').hide();          //隐藏加载图标                        var message = data['message'];                        var code = data['code'];                        if(code != 200) {               //如果code为200，则上传进度为0%                            $('#fileUploadProcess').html('0%');                        }                        if(message)                        {                            //alert(data.message+data.filename);                            importExcel(data.filename); //导入Excel                        }                    },                    error: function (data, status, e)                    {                        //清除定时器                        if(uploadProcessTimer) {                            window.clearInterval(uploadProcessTimer);                        }                        $('#loading').hide();                        //这里处理的是网络异常，返回参数解析异常，DOM操作异常                        alert("上传发生异常1");                    }                })                return false;            }            //获取文件上传进度            function getFileUploadProcess() {                $.get('getFileProcessServlet', function(data) {                    $('#fileUploadProcess').html(data);        //上传进度：<label id="fileUploadProcess"></label>                });            }

6.设定日期

function myformatter(date){                var y = date.getFullYear();     //设置年份                var m = date.getMonth()+1;      //设置月份                var d = date.getDate();         //设置日期                return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);//返回yyyy-MM-dd的格式            }            function myparser(s){                if(!s)return new Date();        //如果s不存在，创建新的日期                var ss = (s.split('-'));        //将日期拆分成数组                var y = parseInt(ss[0],10);     //设置年，十进制解析                var m = parseInt(ss[1],10);     //设置月份，十进制解析                var d = parseInt(ss[2],10);     //设置日期，十进制解析                if(!isNaN(y) && !isNaN(m) && !isNaN(d)){                    return new Date(y,m-1,d);                }else{                    return new Date();                }                       }

html前台：

<input class="easyui-datebox" data-options="formatter:myformatter,parser:myparser"/>            

7 数组转json对象

var jsonstr="[";for(var i=0;i<data.length;i++) {    if(data[i]!=null) {       jsonstr += "{id:" + "\"" + data[i] + "\",text:" + "\"" + data[i] + "\"},";    }}jsonstr = jsonstr.substring(0,jsonstr.lastIndexOf(','));jsonstr +="]";var years = eval(jsonstr);

//数组转json串var arr = [1,2,3, { a : 1 } ];JSON.stringify( arr );//json字符串转数组var jsonStr = '[1,2,3,{"a":1}]';JSON.parse( jsonStr );

8 combobox动态加载

 var date=new Date; var y=date.getFullYear(); $("#sel").combobox({                    valueField: "id",                    textField: "text",                                 data: years,          //接上文的years                    value:y,              //获取当年的年份                      onSelect: function (rec) {                        //$("#sel").combobox("setValue", rec.text);                        $('#dg').datagrid("reload", {//将选中的值重加载给dg                            "year": rec.text                        });                    }});