easuyi editDataGrid的实现优化版

最新推荐文章于 2019-11-22 17:32:29 发布

老班老班

最新推荐文章于 2019-11-22 17:32:29 发布

阅读量154

点赞数

分类专栏： js 文章标签： js easyui jquery

本文链接：https://blog.csdn.net/weixin_42424269/article/details/86254944

版权

js 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

如果你想用easyui的button，你需要注意引用它的图片和css文件。
这其中需要注意的是，刚开始的版本我们需要点击按钮才能够保存那次编辑，但是这里我们增加了autoSave，让它自动保存；
其次如果点击除表格外的其他地方我们可以实现不选择当前表格的任何项采用$('#dg').edatagrid("clearSelections");
在新增和删除的地方，第一版根据官网上面的列子做的比较复杂，这一次我采用了比较简单的方法去新增和删除

<!DOCTYPE html>
<html lang="en">
<link>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="CSS/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="CSS/icon.css"/>
</head>
<body>
<div class="easyui-panel" title="Data" style="width: 100%;height:285px;">
    <div id="toolBar">
        <a class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:'false'"
           onclick="newData()" style="width: 70px">create</a>
        <a class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:'false'"
           onclick="del()" style="width: 70px">remove</a>
    </div>
    <div id="dg"></div>
</div>
<script src="JS/jquery.min.js"></script>
<script src="JS/jquery.easyui.js"></script>
<script src="JS/menu.js"></script>
<script src="JS/jquery.edatagrid.js"></script>
<script>
    var gConfig = {
        height: 250,//显示20条数据已经调整好的高度
        columns: [
            [{
                field: 'id',
                title: 'id',
                width: '0%',
                align: 'center'
            }, {
                field: 'payment',
                title: 'Payment',
                width: '35%',
                align: 'center',
                editor: {
                    type: 'numberbox',
                }
            }, {
                field: 'foreignAmount',
                title: 'Amount',
                width: '35%',
                align: 'center',
                editor: {
                    type: 'numberbox',
                }
            }],
        ],
        onEndEdit:function(index,row){
            $('#dg').edatagrid("clearSelections");
        }
    };//基本表格配置信息

    $(function(){
        createEdataGrid(gConfig,'#dg');
        $('#dg').edatagrid('hideColumn','id');
    })

    function  createEdataGrid(config,element){
        var _defaultConfig={
            toolbar: toolBar,
            pagination: 'true',
            fitColumns: 'false',
            rownumbers: 'true',
            pageSize: 10,
            autoSave: 'true',   //自动保存
            singleSelect: true,
            height: 230,//显示20条数据已经调整好的高度
            width: '100%',
            striped: 'true',
            loadMsg: '正在吃力加载中.....',
            columns: [],
            showFooter: 'true',
        }
        var _config = $.extend(false,_defaultConfig,config);
        $(element).edatagrid(_config);
    }


    function newData(){
        $('#dg').edatagrid('addRow');
    }

    function del(){
        $('#dg').edatagrid('destroyRow');
    }
</script>
</body>
</html>

老班老班

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
easuyi editDataGrid的实现优化版

如果你想用easyui的button，你需要注意引用它的图片和css文件&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html lang=&quot;en&quot;&amp;gt;&amp;lt;link&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;link rel=&am
复制链接

扫一扫