js常用编辑方法

最新推荐文章于 2024-05-07 17:09:49 发布

坏坏的蛋

最新推荐文章于 2024-05-07 17:09:49 发布

阅读量1.1k

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/qq_36015612/article/details/76177219

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

js常用编辑方法

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
                        });
                    }
});