拷贝Excel数据到DataGrid

最新推荐文章于 2021-05-24 14:42:23 发布

Teln_小凯

最新推荐文章于 2021-05-24 14:42:23 发布

阅读量727

点赞数

本文链接：https://blog.csdn.net/qq873113580/article/details/91405128

版权

效果图

拷贝代码就能用

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Row Editing in DataGrid - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Application/Home/View/Public/js/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Application/Home/View/Public/js/easyui/themes/icon.css">
    <script type="text/javascript" src="http://www.jeasyui.net/Application/Home/View/Public/js/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.jeasyui.net/Application/Home/View/Public/js/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<h2>Row Editing in DataGrid</h2>
<p>Click the row to start editing.</p>
<div style="margin:20px 0;"></div>

<table id="dg" class="easyui-datagrid" title="Row Editing in DataGrid" style="width:700px;height:auto"
       data-options="
				iconCls: 'icon-edit',
				singleSelect: true,
				toolbar: '#tb',
				onClickRow: onClickRow
			">
    <thead>
    <tr>
        <th data-options="field:'itemid',width:80">Item ID</th>
        <th data-options="field:'listprice',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}">List Price</th>
        <th data-options="field:'unitcost',width:80,align:'right',editor:'numberbox'">Unit Cost</th>
        <th data-options="field:'attr1',width:250,editor:'textbox'">Attribute</th>
        <th data-options="field:'status',width:60,align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}">Status</th>
    </tr>
    </thead>
</table>


<div id="tb" style="height:auto">
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="append()">Append</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="removeit()">Remove</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="accept()">Accept</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="reject()">Reject</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="getChanges()">GetChanges</a>
</div>

<script type="text/javascript">
    var editIndex = undefined;
    function endEditing(){
        if (editIndex == undefined){return true}
        if ($('#dg').datagrid('validateRow', editIndex)){

            $('#dg').datagrid('endEdit', editIndex);
            editIndex = undefined;
            return true;
        } else {
            return false;
        }
    }
    function onClickRow(index){
        if (editIndex != index){
            if (endEditing()){
                $('#dg').datagrid('selectRow', index)
                    .datagrid('beginEdit', index);
                editIndex = index;
            } else {
                $('#dg').datagrid('selectRow', editIndex);
            }
        }
    }
    function append(){
        if (endEditing()){
            $('#dg').datagrid('appendRow',{status:'P'});
            editIndex = $('#dg').datagrid('getRows').length-1;
            $('#dg').datagrid('selectRow', editIndex)
                .datagrid('beginEdit', editIndex);
        }
    }
    function removeit(){
        if (editIndex == undefined){return}
        $('#dg').datagrid('cancelEdit', editIndex)
            .datagrid('deleteRow', editIndex);
        editIndex = undefined;
    }
    function accept(){
        if (endEditing()){
            $('#dg').datagrid('acceptChanges');
        }
    }
    function reject(){
        $('#dg').datagrid('rejectChanges');
        editIndex = undefined;
    }
    function getChanges(){
        var rows = $('#dg').datagrid('getChanges');
        alert(rows.length+' rows are changed!');
    }
</script>
<script type="text/javascript">
    $(document).ready(function(){
        $(document.body).bind({
            paste: function(e) {
                if (window.clipboardData) {
                    return ;
                }
                var clipboardData = e.originalEvent.clipboardData;
                processData(clipboardData);
            }
        });

        document.onkeyup = function(e) {
            if (window.clipboardData) {
                e = window.event || e;
                var keyCode = e.keyCode || e.which || e.charCode;
                var ctrlKey = e.ctrlKey || e.metaKey;
                if (ctrlKey && keyCode == 86) {
                    var clipboardData = window.clipboardData;
                    processData(clipboardData);
                }
            }
            return false;
        }

        var processData = function(clipboardData) {
            var dg=$("#dg");
            var data = clipboardData.getData('Text').split('\n');

            for (var i = 0; i < data.length; i++) {
                if (!data[i]) {
                    continue ;
                }
                var bugdetData = data[i].split('\t');
                //这里验证数据，如果不正确就别添加了

                dg.datagrid('appendRow',{
                        itemid: bugdetData[0],
                        listprice: bugdetData[1],
                        unitcost: bugdetData[2],
                        attr1:bugdetData[3],
                        status:$.trim(bugdetData[4])

                });
            }

        };
    });
</script>
</body>
</html>

Teln_小凯

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
拷贝Excel数据到DataGrid

效果图拷贝代码就能用<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Row Editing in DataGrid - jQuery EasyUI Demo</title> <link rel="style...
复制链接

扫一扫