Easyui使用DataGrid增删改查以及常见问题

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/pang_da_xing/article/details/75363364

DataGrid数据网格

<table id="dg" title="添加其他项" class="easyui-datagrid"
                style="width: 90%; height: 250px" toolbar="#toolbar"
                pagination="true" rownumbers="true" fitColumns="true"
                singleSelect="true">
                <thead>
                    <tr>
                        <th field="rid" width="50"
                            editor="{type:'validatebox',options:{required:true}}">编号</th>
                        <th field="type" width="50"
                            editor="{type:'validatebox',options:{required:true}}">类型</th>
                        <th field="count" width="50"
                            editor="{type:'validatebox',options:{required:true}}">数量</th>
                        <td field="unit1" width="50"
                            editor="{type:'validatebox',options:{required:true}}">单位</td>
                        <th field="compensationStandard" width="50"
                            editor="{type:'validatebox',options:{required:true}}">补偿标准</th>
                        <td field="unit2" width="50"
                            editor="{type:'validatebox',options:{required:true}}">单位</td>
                        <th field="compensationFee" width="50"
                            editor="{type:'validatebox',options:{required:true}}">补偿费</th>
                        <td field="unit3" width="50"
                            editor="{type:'validatebox',options:{required:true}}">单位</td>
                    </tr>
                </thead>
            </table>
            <div id="toolbar">
                <a href="javascript:void(0)" class="easyui-linkbutton"
                    iconCls="icon-add" plain="true" onclick="newData()">新建</a> <a
                    href="javascript:void(0)" class="easyui-linkbutton"
                    iconCls="icon-edit" plain="true" onclick="editData()">编辑</a> <a
                    href="javascript:void(0)" class="easyui-linkbutton"
                    iconCls="icon-remove" plain="true" onclick="destroyData()">删除</a>
            </div>

            <div id="dlg" class="easyui-dialog"
                style="width: 400px; height: 280px; padding: 10px 20px"
                closed="true" buttons="#dlg-buttons" shadow="false">
                <form id="fm" novalidate>
                    <div class="fitem">
                        <input id="rid" name="rid" style="display: none;">
                    </div>
                    <div class="fitem">
                        <label>类型:</label> <input id="type" name="type"
                            style="width: 100px" method="get" url="selectTypeDictionary.json"
                            valueField="type" textField="type" />
                    </div>
                    <div class="fitem">
                        <label>数量:</label> <input id="count" name="count"
                            class="easyui-numberbox textbox" required="true" min="0.01"
                            max="100000000" precision="2" missingMessage="只能输入数字" />
                    </div>
                    <div class="fitem">
                        <label>补偿标准:</label> <input id="compensationStandard"
                            name="compensationStandard" class="easyui-numberbox textbox"
                            min="0.01" max="100000000" precision="2" missingMessage="只能输入数字" />
                    </div>
                    <div class="fitem">
                        <label>补偿费:</label> <input id="compensationFee"
                            name="compensationFee" class="easyui-numberbox textbox"
                            min="0.01" max="100000000" precision="2" missingMessage="只能输入数字" />
                    </div>
                </form>
            </div>
            <div id="dlg-buttons">
                <a href="javascript:void(0)" class="easyui-linkbutton"
                    iconCls="icon-ok" onclick="saveData()">Save</a> <a
                    href="javascript:void(0)" class="easyui-linkbutton"
                    iconCls="icon-cancel"
                    onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
            </div>
            <style type="text/css">
#fm {
    margin: 0;
    padding: 10px 30px;
}

.ftitle {
    font-size: 14px;
    font-weight: bold;
    padding: 5px 0;
    margin-bottom: 10px;
    border-bottom: 1px solid #ccc;
}

.fitem {
    margin-bottom: 5px;
}

.fitem label {
    display: inline-block;
    width: 80px;
}
</style>

Javascript 动态url添加参数

<script type="text/javascript">
    $(function() {    //这里一定要添加，加载数据，否则会加载失败
        //console.info(parent.id)
        $('#dg').datagrid({
            url : 'getElseView.json',
            method : 'POST',
            queryParams : {
                'agreementId' : parent.id  //这里是获取父窗口参数
            },
        })
    })
</script>

增删改操作

        var url;
        function newData(){
            $('#type').combobox({
                formatter:function(row){
                    return '<span class="item-text">'+row.type+'</span>';
                }
            });

            $('#dlg').dialog('open').dialog('setTitle','新增项');
            $("#dlg").panel("move",{top:$(document).scrollTop() + ($(window).height()-250) * 0.5});  
            $('#fm').form('clear');
            url = 'addElesData.json';
        }
        function editData(){
            $('#type').combobox({
                formatter:function(row){
                    return '<span class="item-text">'+row.type+'</span>';
                }
            });

            var row = $('#dg').datagrid('getSelected');
            if (row){
                $('#dlg').dialog('open').dialog('setTitle','修改数据');
                $("#dlg").panel("move",{top:$(document).scrollTop() + ($(window).height()-250) * 0.5});  
                $('#fm').form('load',row);
                url = 'updateElse.json';
            }
        }
        function chooseType(type){
        //  var number = parseInt(type);
            var unitList = [];
            if(type == "其他" ){  //else 个
                unitList.push(34);
                unitList.push(35);
                unitList.push(31);
                unitList.push(200);
            }else if(type == "空调"){
                unitList.push(34);
                unitList.push(35);
                unitList.push(31);
                unitList.push(212);
            }
            return unitList;
        }
        function saveData(){
            var type = $("#type").val();
            var unitList =  chooseType(type);
            var count = $("#count").val();
            var compensationStandard = $("#compensationStandard").val();
            var compensationFee = $("#compensationFee").val();
            var agreementContent={
                    RID:$("#rid").val(),
                    PID:parent.id,
                    type:unitList[3],
                    count:parseFloat(count).toFixed(2),
                    compensationStandard:parseFloat(compensationStandard).toFixed(2),
                    compensationFee:parseFloat(compensationFee).toFixed(2),
                    Unit1:unitList[0],
                    Unit2:unitList[1],
                    Unit3:unitList[2]
    }
            console.info(agreementContent)
            console.info(url)
    $.ajax({
        url: url,
        method:'post',
        data:agreementContent,
        dataType: "json", 
        success: function(result){
            if (result==0){
                 $.messager.alert('提示',result.errorMsg,'error');
            } else {
                $('#dlg').dialog('close');        // close the dialog
                $('#dg').datagrid('reload');    // reload the user data
                $.messager.alert('提示','提交成功！');
            }
        },
        error:function(){
             $.messager.alert('提示','数据格式错误','error');
        }
    });
        }
        function destroyData(){
            var row = $('#dg').datagrid('getSelected');
            if (row){
                $.messager.confirm('Confirm','Are you sure you want to destroy this user?',function(r){
                    if (r){
                        $.ajax({
                            url:'deleteElse.json?agreementContentId='+row.rid,
                            type:'get',
                          success: function(data) { 
                              if(data == 0){
                                  $.messager.alert('提示',data.errorMsg,'error');
                              }else{
                                //登录成功
                                  $('#dg').datagrid('reload');    // reload the user data
                                $.messager.alert('提示','删除成功！');
                              }
                            },
                              error: function(data) { 
                                  $.messager.alert('提示','错误，请重试！','error');
                              }
                            });
                    }
                });
            }
        }
    $(function(){
        $('#fm input').each(function () {
            if ($(this).attr('required') || $(this).attr('validType'))
                $(this).validatebox();
        })
        });
    $.extend($.fn.validatebox.defaults.rules, {
    }
);

以下补充一些常见问题

在使用dialog插件时，默认是屏幕居中的，但是当页面出现滚动条时，dialog并没有随着滚动条往下滚动，这时就需要用户滑动滚动条来定位dialog，这不人性化，在说出解决方案前先来普及一下jquery关于定位的几个方法

//获取浏览器显示区域的高度   
$(window).height();   
//获取浏览器显示区域的宽度   
$(window).width();   

//获取页面的文档高度   
$(document.body).height();   
//获取页面的文档宽度   
$(document.body).width();   

//获取滚动条到顶部的垂直高度   
$(document).scrollTop();   
//获取滚动条到左边的垂直宽度   
$(document).scrollLeft();  

$('#dlg').dialog('open');  
$("#dlg").panel("move",{top:$(document).scrollTop() + ($(window).height()-250) * 0.5});  

给 easyui-texbox赋值

$('#result').textbox().textbox('setValue','未达标');
//使用easyui里给其赋值不能直接使用 $("#id").val("param");

在程序代码中使用了panel的move属性，代码如下：
$(‘#dlg’).window(‘open’);$('#dlg').panel('move',{top:$(document).scrollTop() + ($(window).height()-200) * 0.5});
在测试时出现了一个问题：就是打开的窗口能够居中显示（有滚动条也能居中显示），但是在原来的位置上会出现一个跟窗口一样大小的阴影

<div id="dlg" class="easyui-dialog" style="width: 400px; height: 280px; padding: 10px 20px" closed="true" buttons="#dlg-buttons" shadow="false">

//设置属性：shadow （布尔 如果设置为true，窗口的阴影也将显示。）
//需要在此加上 shadow="false" 的属性