jexcel_页面与数据库交互

页面表格文件 homePage.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="homePage.aspx.cs" Inherits="homePage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>SSC</title><%--OK--%>

    <%--CSS--%>
    <link href="/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="/Content/bootstrap-table.min.css" rel="stylesheet" />
    <link href="/Content/bootstrap-editable.css" rel="stylesheet" />
    <link href="/Scripts/jexcel/jexcel.css" rel="stylesheet" />
    <link href="/Scripts/jexcel/jsuites.css" rel="stylesheet" />
    <%--<link href="/Scripts/page/css/pagination.min.css" rel="stylesheet" />
    <link href="/Scripts/page/css/pagination.scss" rel="stylesheet" />--%>
</head>

<body>
    <form id="form1" runat="server">

        <%--表头--%>
        <div id="header">
            <h1>
                <asp:Image ID="Image3" ImageUrl="/img/KMlogo1.png" Style="opacity: 0.7" Width="205" Height="60" runat="server" />C宝不仅是技术，更是便利！
                &nbsp;                
            </h1>
        </div>
        <nav class="navbar navbar-inverse">
            <div class="container-md">
                <%--container-fluid--%>
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">SSC</a>
                </div>
                <div class="collapse navbar-collapse" id="myNavbar">
                    <ul class="nav navbar-nav navbar-left">
                        <li class="active"><a href="#">主页</a></li>
                        <li><a href="/Web/MailList.aspx">联系方式</a></li>
                        <%--<li><a href="#">计划任务</a></li>--%>
                        <li><a href="/help.aspx">帮助查询</a></li>
                        <%--<li><a href="#">页面 1</a></li>
                        <li><a href="/Web/Navigation.aspx">页面 2</a></li>
                        <li><a href="#">页面 3</a></li>--%>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a href="#" id="loginname">
                                <asp:Image ID="Image1" runat="server" ImageUrl="~/img/u12.png"></asp:Image>
                                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>&nbsp 访问
                            </a>
                        </li>
                        <li>
                            <a href="/Web/statistics.aspx">统计</a>
                        </li>
                        <li>
                            <%--<a href="javascript:window.external.AddFavorite('http://*/InfoList.aspx?','SSC_WEB')">收藏</a>--%>
                            <a href="#" onclick="AddFavorite(window.location,document.title)" rel="sidebar">加入收藏</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

        <%--工具栏--%>
        <div class="container-fluid">
            <div class="row">
                <%--增删改查按钮--%>
                <div class="col-md-6">
                    <div id="toolbar1" class="btn-group">
                        <button id="btn_add" type="button" class="btn btn-info" onclick="mySpreadsheet.insertRow()">
                            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增行 OK
                        </button>
                        <button id="btn_edit" type="button" class="btn btn-warning" onclick="mySpreadsheet.undo()">
                            <span class="glyphicon glyphicon-transfer" aria-hidden="true"></span>撤消更改 OK
                        </button>
                        <button id="btn_delete" type="button" class="btn btn-danger" onclick="mySpreadsheet.deleteRow()">
                            <span class="    glyphicon glyphicon-minus" aria-hidden="true"></span>删除行 OK
                        </button>
                        <button id="btn_save" type="button" class="btn btn-success" onclick="mySpreadsheet.save()">
                            <span class="    glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存页面修改的数据
                        </button>
                        <%--<button id="btn_import" type="button" class="btn btn-info" onclick="customSearch()">
                                <span class="glyphicon glyphicon-search" aria-hidden="true"></span>测试按钮
                            </button>--%>
                        <%--<button id="btn_import" type="button" class="btn btn-info">
                                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>数据导入 
                            </button>--%>
                        <input class="hidden" />
                    </div>
                    <%--<div id="toolbar" class="btn-group">
                    </div>--%>
                </div>

                <div class="col-md-6">
                    <div class="text-right">
                        <%-- <input class="input-text-left" style="width: 200px; height: 32px;" type="text"  id="ip_search" />--%>
                        <%--<button id="btn_save" type="button" class="btn btn-primary" onclick="save()">
                        <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>搜索
                    </button>--%>
                        <button id="my_refresh" type="button" class="btn btn-warning">
                            <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>刷新 OK
                        </button>
                        <button id="my_download" type="button" class="btn btn-success">
                            <span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span>导出 OK
                        </button>
                        <button id="my_updateTable" type="button" class="btn btn-warning">
                            <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存
                        </button>
                    </div>
                </div>

                <%--表格--%>
                <div id="spreadsheet" class="container"></div>

            </div>

        </div>
    </form>

    <div>
        <button onclick="$('#log').html('')">Clear</button>&nbsp;
        <p>Log:</p>
        <div id='log' style='background-color: #c7eaff; border-radius: 2px; color: #000; padding: 20px'></div>
    </div>

</body>

<%--JS--%>
<%--jquery和bootstrap--%>
<script src="../Scripts/jquery.min.js"></script>
<%--<script src="../Scripts/jquery-1.10.2.min.js"></script>--%>
<script src="../Scripts/bootstrap.min.js"></script>
<%--bootstrp-table--%>
<script src="../Scripts/bootstrap-table.min.js"></script>
<%--bootstrap-table编辑包--%>
<script src="../Scripts/bootstrap-editable.js"></script>
<script src="../Scripts/bootstrap-table-editable.js"></script>
<%--bootstrap-table导出包--%>
<script src="../Scripts/tableExport.js"></script>
<script src="../Scripts/bootstrap-table-export.js"></script>
<script src="../Scripts/FileSaver.min.js"></script>
<script src="../Scripts/xlsx.core.min.js"></script>
<%--bootstrap-table语言包--%>
<script src="../Scripts/bootstrap-table-zh-CN.min.js"></script>
<%--Jexcel包--%>
<script src="../Scripts/jexcel/jexcel.js"></script>
<script src="../Scripts/jexcel/jsuites.js"></script>
<%--Jexcel包 分页--%>
<%--<script src="../Scripts/page/js/pagination.js"></script>--%>

<%--图片--%>
<script src="../Scripts/material-ui.development.js"></script>

<%--js脚本--%>
<script type="text/javascript">

    var changed = function (instance, cell, x, y, value) {
        var cellName = jexcel.getColumnNameFromId([0, y]);  //当前行首列 及 DBID。 例如：A1
        var DBID = document.getElementById('spreadsheet').jexcel.getValue(cellName);       //行号 例如：5989 
        var modifyValue = value;      //修改后的值 例如：S7160077
        var rowData = document.getElementById('spreadsheet').jexcel.getRowData(y);          //当前行的整行数据 
        

        if (x = 2) { var fieldName = "Shipto"; }; //字段名

        //确认，是否拿到值
        //alert(DBID + '-' + fieldName + '-' + modifyValue);

        $.ajax({
            url: "Handler2.ashx",
            datatype: "json",
            //注释:mydata.toString():转化为字符类型的变量
            data: { "RequestType": "save_data", "DBID": DBID, "modifyValue": modifyValue, "fieldName": fieldName },
            success: function (data) {
                //注释:返回结果,此处不需要了
            },
            error: function (error) {
                alert(error.responseText);
            }
        });//注释:ajax, 输入的值,保存到数据库-结束
        
    }

    //var mysave = function (url, data) {
    //    // Parse anything in the data before sending to the server 在发送到服务器之前分析数据中的任何内容
    //    var ret = obj.dispatch('onbeforesave', el, obj, data);
    //    if (ret) { var data = ret; } else { if (ret === false) { return false; } }
    //    // Remove update 删除更新
    //    jSuites.ajax({
    //        url: url, method: 'POST', dataType: 'json', data: { data: JSON.stringify(data) },
    //        success: function (result) {
    //            // Event 事件
    //            obj.dispatch('onsave', el, obj, data);
    //        }
    //    });
    //}

    var beforeChange = function (instance, cell, x, y, value) {
        var cellName = jexcel.getColumnNameFromId([x, y]);
        $('#log').append('单元格 ' + cellName + ' 将被更改');
    }

    var insertedRow = function (instance) {
        $('#log').append('已添加行');
    }

    var insertedColumn = function (instance) {
        $('#log').append('已添加列');
    }

    var deletedRow = function (instance) {
        $('#log').append('行已删除');
    }

    var deletedColumn = function (instance) {
        $('#log').append('列已删除');
    }

    var sort = function (instance, cellNum, order) {
        var order = (order) ? 'desc' : 'asc';
        $('#log').append('列  ' + cellNum + ' 排序方式 ' + order + '');
    }

    var resizeColumn = function (instance, cell, width) {
        $('#log').append('列  ' + cell + ' 根据宽度调整大小 ' + width + ' px');
    }

    var resizeRow = function (instance, cell, height) {
        $('#log').append('行  ' + cell + ' 根据高度调整大小 ' + height + ' px');
    }

    var selectionActive = function (instance, x1, y1, x2, y2, origin) {
        var cellName1 = jexcel.getColumnNameFromId([x1, y1]);
        var cellName2 = jexcel.getColumnNameFromId([x2, y2]);
        $('#log').append(cellName1 + ' 到 ' + cellName2 + '选中');
    }

    var loaded = function (instance) {
        $('#log').append('加载新数据');
    }

    var moveRow = function (instance, from, to) {
        $('#log').append('行' + from + ' 被移动到 ' + to + ' ');
    }

    var moveColumn = function (instance, from, to) {
        $('#log').append('列 ' + from + '被移动到的位置 ' + to + ' ');
    }

    var blur = function (instance) {
        $('#log').append('表格 ' + $(instance).prop('id') + ' 是模糊的');
    }

    var focus = function (instance) {
        $('#log').append('表格 ' + $(instance).prop('id') + ' 是焦点');
    }

    var paste = function (data) {
        $('#log').append('粘贴到表格上' + $(instance).prop('id') + '');
    }

    var mySpreadsheet = jspreadsheet(document.getElementById('spreadsheet'), {

        url: 'Handler1.ashx',  // 获取数据
        search: true,          // 搜索
        async: true,
        allowExport: true,     // 是否允许导出 
        colWidths: [50, 80, 100, 100, 100, 80, 100, 100, 80, 80, 100, 70, 70, 70, 70, 80, 100], //列宽
        tableOverflow: true,   // 是否允许表溢出溢出的时候右边有那个滚动条
        tableWidth: "1520px",  // 表宽度
        tableHeight: "430px",  // 表高度
        pagination: 10,        // 显示分页，每页10行数据
        paginationOptions: [10, 15, 25, 50], //用户自主选择每页需展示的数据条数


        //鼠标右键菜单_翻译 OK
        text: {
            copy: '复制',
            paste: '粘贴',
            insertANewRowBefore: '在此前插入行',
            insertANewRowAfter: '在此后插入行',
            deleteSelectedRows: '删除选定行',
            saveAs: '保存为',
            about: '关于',
            noRecordsFound: '未找到记录',
            showingPage: '显示第 {0} 页，共 {1} 页',
            show: '显示',
            entries: '条目',
            insertANewColumnBefore: '在此前插入列',
            insertANewColumnAfter: '在此后插入列',
            renameThisColumn: '重命名列',
            deleteSelectedColumns: '删除选定列',
            orderAscending: '升序',
            orderDescending: '降序',
            editComments: '编辑注释',
            addComments: '添加注释',
            comments: '注释',
            clearComments: '清除注释',
            areYouSureToDeleteTheSelectedRows: '您确定要删除选定的行吗？',
            areYouSureToDeleteTheSelectedColumns: '您确定要删除所选列吗？',
            thisActionWillDestroyAnyExistingMergedCellsAreYouSure: '此操作将销毁所有现有的合并单元格。你确定吗',
            thisActionWillClearYourSearchResultsAreYouSure: '此操作将清除您的搜索结果。你确定吗',
            Search: '搜索',
            thereIsAConflictWithAnotherMergedCell: '与另一个合并单元格发生冲突',
            invalidMergeProperties: '合并无效',
            cellAlreadyMerged: '单元格已合并',
            noCellsSelected: '未选择单元格',
        },

        //日期选取器 OK
        options: {
            format: 'DD/MM/YYYY', //日期格式
            readonly: 0,          //允许键盘输入日期
            today: 0,             //今天是默认值
            time: 0,              //显示时间选择器
            resetButton: true,    //显示重置按钮
            placeholder: '',      //占位符
            // 翻译
            months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
            weekdays_short: ['Su', 'M', 'T', 'W', 'T', 'F', 'Sa'],
            value: null,          //值
            onclose: null,        //onclose事件
            onchange: null,       //onchange事件
            fullscreen: false,    //全屏显示（这是屏幕尺寸＜800时自动设置的）
        },


        //列属性 OK
        columns: [
                    //{
                    //    title: 'checkbox',
                    //    field: 'NO',         //第一列显示复选框，若单选，需加入singleSelect
                    //    type: 'checkbox',
                    //},
                    //{
                    //    field: 'id',               //数据键(数据库字段名)
                    //    title: 'DBid',             //列名 （页面显示）
                    //    sortable: true,            //是否允许排序
                    //    align: 'center',           //居中                        
                    //    footerFormatter: 'Total',  //表底显示合计
                    //},                    
                    { field: 'id', title: 'DBid', sortable: true, align: 'center', },
                    { field: 'type', title: 'type', sortable: true, align: 'center', },
                    { field: 'Shipto', title: 'Shipto', sortable: true, align: 'center', },
                    { field: 'Soldto', title: 'Soldto', sortable: true, align: 'center', },
                    { field: 'MOsPONo', title: 'MOsPONo', sortable: true, align: 'center', },
                    { field: 'Item', title: 'Item', sortable: true, align: 'center', },
                    { field: 'Docrecodedate', title: 'Docrecodedate', sortable: true, align: 'center', type: 'calendar', options: { format: 'YYYY/MM/DD' }, },
                    { field: 'Firstdate', title: 'Firstdate', sortable: true, align: 'center', type: 'calendar', options: { format: 'YYYY/MM/DD' }, },
                    { field: 'SONo', title: 'SONo', sortable: true, align: 'center', },
                    { field: 'SOItem', title: 'SOItem', sortable: true, align: 'center', },
                    { field: 'Material', title: 'Material', sortable: true, align: 'center', },
                    { field: 'SOQty', title: 'SOQty', sortable: true, align: 'center', },
                    { field: 'Vendor', title: 'Vendor', sortable: true, align: 'center', },
                    { field: 'PCPIC', title: 'PCPIC', sortable: true, align: 'center', },
                    { field: 'DPT', title: 'DPT', sortable: true, align: 'center', },
                    { field: 'Deliverydate', title: 'Deliverydate', sortable: true, align: 'center', type: 'calendar', options: { format: 'YYYY/MM/DD' }, },
                    { field: 'PONo', title: 'PONo', sortable: true, align: 'center', },
                    { field: 'POItem', title: 'POItem', sortable: true, align: 'center', },
                    { field: 'POqty', title: 'POqty', sortable: true, align: 'center', },
                    { field: 'PackGRBal', title: 'PackGRBal', sortable: true, align: 'center', },
                    { field: 'POIssDate', title: 'POIssDate', sortable: true, align: 'center', type: 'calendar', options: { format: 'YYYY/MM/DD' }, },
                    { field: 'Priorityorder', title: 'Priorityorder', sortable: true, align: 'center', },
                    { field: 'Lastreply', title: 'Lastreply', sortable: true, align: 'center', type: 'calendar', options: { format: 'YYYY/MM/DD' }, },
                    { field: 'WHreservation', title: 'WHreservation', sortable: true, align: 'center', },
                    { field: 'DRcode', title: 'DRcode', sortable: true, align: 'center', },
                    { field: 'Causeofdelay', title: 'Causeofdelay', sortable: true, align: 'center', },
                    { field: 'Targetdate', title: 'Targetdate', sortable: true, align: 'center', type: 'calendar', options: { format: 'YYYY/MM/DD' }, },
                    { field: 'TargetQTY', title: 'TargetQTY', sortable: true, align: 'center', },
                    { field: 'Column27', title: 'Column27', sortable: true, align: 'center', },
                    { field: 'Column10', title: 'Column10', sortable: true, align: 'center', },
                    { field: 'Remark', title: 'Remark', sortable: true, align: 'center', },
                    { field: 'Column19', title: 'Column19', sortable: true, align: 'center', },
                    { field: 'destination', title: 'destination', sortable: true, align: 'center', },
                    { field: 'supplier', title: 'supplier', sortable: true, align: 'center', },
                    { field: 'Orderstatus', title: 'Orderstatus', sortable: true, align: 'center', },
                    { field: 'Inlibrarystate', title: 'Inlibrarystate', sortable: true, align: 'center', },
                    { field: 'ConfrimDel', title: 'ConfrimDel', sortable: true, align: 'center', },
                    { field: 'Dateofdelivery', title: 'Dateofdelivery', sortable: true, align: 'center', },
                    { field: 'Supplierdeliverytime', title: 'Supplierdeliverytime', sortable: true, align: 'center', },
                    { field: 'Purchaseperiod', title: 'Purchaseperiod', sortable: true, align: 'center', },
                    { field: 'Ordercode', title: 'Ordercode', sortable: true, align: 'center', },
                    { field: 'SalesinvoiceNo', title: 'SalesinvoiceNo', sortable: true, align: 'center', },
                    { field: '明細No', title: '明細No', sortable: true, align: 'center', },
                    { field: 'ETDQTY', title: 'ETDQTY', sortable: true, align: 'center', },
                    { field: '納入期日', title: '納入期日', sortable: true, align: 'center', type: 'calendar', options: { format: 'YYYY/MM/DD' }, },
                    { field: 'date2', title: 'date2', sortable: true, align: 'center', type: 'calendar', options: { format: 'YYYY/MM/DD' }, },
                    { field: 'ShippingMethod', title: 'ShippingMethod', sortable: true, align: 'center', },
                    { field: 'Deliverytimestorage', title: 'Deliverytimestorage', sortable: true, align: 'center', },
                    { field: '購買発注No', title: '購買発注No', sortable: true, align: 'center', },
                    { field: 'NO', title: 'NO', sortable: true, align: 'center', },
                    { field: 'Destination2', title: 'Destination2', sortable: true, align: 'center', },
                    { field: 'Buyer', title: 'Buyer', sortable: true, align: 'center', },
                    { field: 'QTY', title: 'QTY', sortable: true, align: 'center', },
                    { field: 'Remarks', title: 'Remarks', sortable: true, align: 'center', },
                    { field: 'No3', title: 'No3', sortable: true, align: 'center', },
                    { field: 'item4', title: 'item4', sortable: true, align: 'center', },
                    { field: 'pgrp', title: 'pgrp', sortable: true, align: 'center', },
                    { field: 'ic', title: 'ic', sortable: true, align: 'center', },
                    { field: 'ac', title: 'ac', sortable: true, align: 'center', },
                    { field: 'grqty', title: 'grqty', sortable: true, align: 'center', },
                    { field: 'loc', title: 'loc', sortable: true, align: 'center', },
                    { field: 'confirmedqty', title: 'confirmedqty', sortable: true, align: 'center', },
                    { field: 'reason', title: 'reason', sortable: true, align: 'center', },
                    { field: 'KEY1', title: 'KEY1', sortable: true, align: 'center', },
                    { field: 'KEY2', title: 'KEY2', sortable: true, align: 'center', },

        ],

        //事件 必须先完成事件的function
        onchange: changed,//单元格变更事件
        //onbeforechange: beforeChange,
        //oninsertrow: insertedRow,
        //oninsertcolumn: insertedColumn,
        //ondeleterow: deletedRow,
        //ondeletecolumn: deletedColumn,
        //onselection: selectionActive,
        //onsort: sort,
        //onresizerow: resizeRow,
        //onresizecolumn: resizeColumn,
        //onmoverow: moveRow,
        //onmovecolumn: moveColumn,
        //onload: loaded,
        //onblur: blur,
        //onfocus: focus,
        //onpaste: paste,
    });

    //导出_按钮点击事件,格式为csv文件 OK
    $('#my_download').on('click', function () {
        document.getElementById('spreadsheet').jexcel.download();
    });

    //刷新_按钮点击事件 OK
    $('#my_refresh').on('click', function () {
        document.getElementById('spreadsheet').jexcel.refresh();
    });

    //更新数据_按钮点击事件 NG
    $('#my_updateTable').on('click', function () {

    });

    //打印_按钮点击事件
    //$('#my_updateTable').on('click', function () {
    //    document.getElementById('spreadsheet').jexcel.updateTable();
    //});

</script>

</html>

通过一般程序 Handler2.ashx 往数据库中写入变更值

<%@ WebHandler Language="C#" Class="Handler2" %>

using System;
using System.Web;
using System.Data;
using System.Data.SqlClient; //数据库
using Newtonsoft.Json;      //操作json库

public class Handler2 : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";

        //获取前台的信息  
        if (context.Request["RequestType"] == "save_data") //save_data是homePage.aspx中自定义的请求类型
        {
            int dbId = Convert.ToInt32(context.Request["DBID"]);            //ID是homoPage.aspx中获取的页面值  
            string fieldName = context.Request["fieldName"].ToString();     //字段名 "FieldName"是homePage.aspx中获取的值
            string modifyValue = context.Request["modifyValue"].ToString(); //变更值 "ModifyValue"是homePage.aspx中获取的值

            //int dbId = 5989;                 //ID
            //string fieldName = "Shipto";     //字段名
            //string modifyValue = "S7160077"; //值
            string s0 = "update outstanding set " + fieldName + "='" + modifyValue + "' where id=" + dbId;

            //往数据库写入新信息  
            SqlConnection conn = new SqlConnection("server=*;database=*;uid=sscosd;pwd=*");
            conn.Open();
            SqlCommand cmd = new SqlCommand(s0, conn); //用来执行查询语句
            SqlDataAdapter sda = new SqlDataAdapter(); //数据库适配器，用来充当数据库与数据集之间的桥梁
            sda.SelectCommand = cmd;                   //选择命令向数据库发送（发送查询语句）
            DataSet ds = new DataSet();                //创建一个数据集对象,相当于小型数据库，它当中存放若干个数据块
            sda.Fill(ds, "cs");                        //Fill: 填充  把数据填充名为“CS”的表中。 重要！！！

            //输出查询语句，确认是否正确
            context.Response.Write(s0);
        };

    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="homePage.aspx.cs" Inherits="homePage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>SSC</title><%--OK--%>
<%--CSS--%> <link href="/Content/bootstrap.min.css" rel="stylesheet" /> <link href="/Content/bootstrap-table.min.css" rel="stylesheet" /> <link href="/Content/bootstrap-editable.css" rel="stylesheet" /> <link href="/Scripts/jexcel/jexcel.css" rel="stylesheet" /> <link href="/Scripts/jexcel/jsuites.css" rel="stylesheet" /> <%--<link href="/Scripts/page/css/pagination.min.css" rel="stylesheet" /> <link href="/Scripts/page/css/pagination.scss" rel="stylesheet" />--%></head>
<body> <form id="form1" runat="server">
<%--表头--%> <div id="header"> <h1> <asp:Image ID="Image3" ImageUrl="/img/KMlogo1.png" Style="opacity: 0.7" Width="205" Height="60" runat="server" />C宝不仅是技术，更是便利！       </h1> </div> <nav class="navbar navbar-inverse"> <div class="container-md"> <%--container-fluid--%> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">SSC</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav navbar-left"> <li class="active"><a href="#">主页</a></li> <li><a href="/Web/MailList.aspx">联系方式</a></li> <%--<li><a href="#">计划任务</a></li>--%> <li><a href="/help.aspx">帮助查询</a></li> <%--<li><a href="#">页面 1</a></li> <li><a href="/Web/Navigation.aspx">页面 2</a></li> <li><a href="#">页面 3</a></li>--%> </ul> <ul class="nav navbar-nav navbar-right"> <li> <a href="#" id="loginname"> <asp:Image ID="Image1" runat="server" ImageUrl="~/img/u12.png"></asp:Image> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>&nbsp 访问 </a> </li> <li> <a href="/Web/statistics.aspx">统计</a> </li> <li> <%--<a href="javascript:window.external.AddFavorite('http://150.17.237.155:80/InfoList.aspx?','SSC_WEB')">收藏</a>--%> <a href="#" onclick="AddFavorite(window.location,document.title)" rel="sidebar">加入收藏</a> </li> </ul> </div> </div> </nav>
<%--工具栏--%> <div class="container-fluid"> <div class="row"> <%--增删改查按钮--%> <div class="col-md-6"> <div id="toolbar1" class="btn-group"> <button id="btn_add" type="button" class="btn btn-info" onclick="mySpreadsheet.insertRow()"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增行 OK </button> <button id="btn_edit" type="button" class="btn btn-warning" onclick="mySpreadsheet.undo()"> <span class="glyphicon glyphicon-transfer" aria-hidden="true"></span>撤消更改 OK </button> <button id="btn_delete" type="button" class="btn btn-danger" onclick="mySpreadsheet.deleteRow()"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>删除行 OK </button> <button id="btn_save" type="button" class="btn btn-success" onclick="mySpreadsheet.save()"> <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存页面修改的数据 </button> <%--<button id="btn_import" type="button" class="btn btn-info" onclick="customSearch()"> <span class="glyphicon glyphicon-search" aria-hidden="true"></span>测试按钮 </button>--%> <%--<button id="btn_import" type="button" class="btn btn-info"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>数据导入   </button>--%> <input class="hidden" /> </div> <%--<div id="toolbar" class="btn-group"> </div>--%> </div>
<div class="col-md-6"> <div class="text-right"> <%-- <input class="input-text-left" style="width: 200px; height: 32px;" type="text" id="ip_search" />--%> <%--<button id="btn_save" type="button" class="btn btn-primary" onclick="save()"> <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>搜索 </button>--%> <button id="my_refresh" type="button" class="btn btn-warning"> <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>刷新 OK </button> <button id="my_download" type="button" class="btn btn-success"> <span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span>导出 OK </button> <button id="my_updateTable" type="button" class="btn btn-warning"> <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存 </button> </div> </div>

<%--表格--%> <div id="spreadsheet" class="container"></div>

</div>
</div> </form>
<div> <button onclick="$('#log').html('')">Clear</button>  <p>Log:</p> <div id='log' style='background-color: #c7eaff; border-radius: 2px; color: #000; padding: 20px'></div> </div>
</body>
<%--JS--%><%--jquery和bootstrap--%><script src="../Scripts/jquery.min.js"></script><%--<script src="../Scripts/jquery-1.10.2.min.js"></script>--%><script src="../Scripts/bootstrap.min.js"></script><%--bootstrp-table--%><script src="../Scripts/bootstrap-table.min.js"></script><%--bootstrap-table编辑包--%><script src="../Scripts/bootstrap-editable.js"></script><script src="../Scripts/bootstrap-table-editable.js"></script><%--bootstrap-table导出包--%><script src="../Scripts/tableExport.js"></script><script src="../Scripts/bootstrap-table-export.js"></script><script src="../Scripts/FileSaver.min.js"></script><script src="../Scripts/xlsx.core.min.js"></script><%--bootstrap-table语言包--%><script src="../Scripts/bootstrap-table-zh-CN.min.js"></script><%--Jexcel包--%><script src="../Scripts/jexcel/jexcel.js"></script><script src="../Scripts/jexcel/jsuites.js"></script><%--Jexcel包分页--%><%--<script src="../Scripts/page/js/pagination.js"></script>--%>
<%--图片--%><script src="../Scripts/material-ui.development.js"></script>
<%--js脚本--%><script type="text/javascript">
var changed = function (instance, cell, x, y, value) { var cellName = jexcel.getColumnNameFromId([0, y]); //当前行首列及 DBID。例如：A1 var DBID = document.getElementById('spreadsheet').jexcel.getValue(cellName); //行号例如：5989   var modifyValue = value; //修改后的值例如：S7160077 var rowData = document.getElementById('spreadsheet').jexcel.getRowData(y); //当前行的整行数据
if (x = 2) { var fieldName = "Shipto"; }; //字段名
//确认，是否拿到值 //alert(DBID + '-' + fieldName + '-' + modifyValue);
$.ajax({ url: "Handler2.ashx", datatype: "json", //注释:mydata.toString():转化为字符类型的变量 data: { "RequestType": "save_data", "DBID": DBID, "modifyValue": modifyValue, "fieldName": fieldName }, success: function (data) { //注释:返回结果,此处不需要了 }, error: function (error) { alert(error.responseText); } });//注释:ajax, 输入的值,保存到数据库-结束     }
//var mysave = function (url, data) { // // Parse anything in the data before sending to the server 在发送到服务器之前分析数据中的任何内容 // var ret = obj.dispatch('onbeforesave', el, obj, data); // if (ret) { var data = ret; } else { if (ret === false) { return false; } } // // Remove update 删除更新 // jSuites.ajax({ // url: url, method: 'POST', dataType: 'json', data: { data: JSON.stringify(data) }, // success: function (result) { // // Event 事件 // obj.dispatch('onsave', el, obj, data); // } // }); //}
var beforeChange = function (instance, cell, x, y, value) { var cellName = jexcel.getColumnNameFromId([x, y]); $('#log').append('单元格 ' + cellName + ' 将被更改'); }
var insertedRow = function (instance) { $('#log').append('已添加行'); }
var insertedColumn = function (instance) { $('#log').append('已添加列'); }
var deletedRow = function (instance) { $('#log').append('行已删除'); }
var deletedColumn = function (instance) { $('#log').append('列已删除'); }
var sort = function (instance, cellNum, order) { var order = (order) ? 'desc' : 'asc'; $('#log').append('列 ' + cellNum + ' 排序方式 ' + order + ''); }
var resizeColumn = function (instance, cell, width) { $('#log').append('列 ' + cell + ' 根据宽度调整大小 ' + width + ' px'); }
var resizeRow = function (instance, cell, height) { $('#log').append('行 ' + cell + ' 根据高度调整大小 ' + height + ' px'); }
var selectionActive = function (instance, x1, y1, x2, y2, origin) { var cellName1 = jexcel.getColumnNameFromId([x1, y1]); var cellName2 = jexcel.getColumnNameFromId([x2, y2]); $('#log').append(cellName1 + ' 到 ' + cellName2 + '选中'); }
var loaded = function (instance) { $('#log').append('加载新数据'); }
var moveRow = function (instance, from, to) { $('#log').append('行' + from + ' 被移动到 ' + to + ' '); }
var moveColumn = function (instance, from, to) { $('#log').append('列 ' + from + '被移动到的位置 ' + to + ' '); }
var blur = function (instance) { $('#log').append('表格 ' + $(instance).prop('id') + ' 是模糊的'); }
var focus = function (instance) { $('#log').append('表格 ' + $(instance).prop('id') + ' 是焦点'); }
var paste = function (data) { $('#log').append('粘贴到表格上' + $(instance).prop('id') + ''); }
var mySpreadsheet = jspreadsheet(document.getElementById('spreadsheet'), {
url: 'Handler1.ashx', // 获取数据 search: true, // 搜索 async: true, allowExport: true, // 是否允许导出   colWidths: [50, 80, 100, 100, 100, 80, 100, 100, 80, 80, 100, 70, 70, 70, 70, 80, 100], //列宽 tableOverflow: true, // 是否允许表溢出溢出的时候右边有那个滚动条 tableWidth: "1520px", // 表宽度 tableHeight: "430px", // 表高度 pagination: 10, // 显示分页，每页10行数据 paginationOptions: [10, 15, 25, 50], //用户自主选择每页需展示的数据条数

//鼠标右键菜单_翻译 OK text: { copy: '复制', paste: '粘贴', insertANewRowBefore: '在此前插入行', insertANewRowAfter: '在此后插入行', deleteSelectedRows: '删除选定行', saveAs: '保存为', about: '关于', noRecordsFound: '未找到记录', showingPage: '显示第 {0} 页，共 {1} 页', show: '显示', entries: '条目', insertANewColumnBefore: '在此前插入列', insertANewColumnAfter: '在此后插入列', renameThisColumn: '重命名列', deleteSelectedColumns: '删除选定列', orderAscending: '升序', orderDescending: '降序', editComments: '编辑注释', addComments: '添加注释', comments: '注释', clearComments: '清除注释', areYouSureToDeleteTheSelectedRows: '您确定要删除选定的行吗？', areYouSureToDeleteTheSelectedColumns: '您确定要删除所选列吗？', thisActionWillDestroyAnyExistingMergedCellsAreYouSure: '此操作将销毁所有现有的合并单元格。你确定吗', thisActionWillClearYourSearchResultsAreYouSure: '此操作将清除您的搜索结果。你确定吗', Search: '搜索', thereIsAConflictWithAnotherMergedCell: '与另一个合并单元格发生冲突', invalidMergeProperties: '合并无效', cellAlreadyMerged: '单元格已合并', noCellsSelected: '未选择单元格',
},
//日期选取器 OK options: { format: 'DD/MM/YYYY', //日期格式 readonly: 0, //允许键盘输入日期 today: 0, //今天是默认值 time: 0, //显示时间选择器 resetButton: true, //显示重置按钮 placeholder: '', //占位符 // 翻译 months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'], weekdays_short: ['Su', 'M', 'T', 'W', 'T', 'F', 'Sa'], value: null, //值 onclose: null, //onclose事件 onchange: null, //onchange事件 fullscreen: false, //全屏显示（这是屏幕尺寸＜800时自动设置的） },

//列属性 OK columns: [ //{ // title: 'checkbox', // field: 'NO', //第一列显示复选框，若单选，需加入singleSelect // type: 'checkbox', //}, //{ // field: 'id', //数据键(数据库字段名) // title: 'DBid', //列名（页面显示） // sortable: true, //是否允许排序 // align: 'center', //居中     // footerFormatter: 'Total', //表底显示合计 //},     { field: 'id', title: 'DBid', sortable: true, align: 'center', }, { field: 'type', title: 'type', sortable: true, align: 'center', }, { field: 'Shipto', title: 'Shipto', sortable: true, align: 'center', }, { field: 'Soldto', title: 'Soldto', sortable: true, align: 'center', }, { field: 'MOsPONo', title: 'MOsPONo', sortable: true, align: 'center', }, { field: 'Item', title: 'Item', sortable: true, align: 'center', }, { field: 'Docrecodedate', title: 'Docrecodedate', sortable: true, align: 'center', type: 'calendar', options: { format: 'YYYY/MM/DD' }, }, { field: 'Firstdate', title: 'Firstdate', sortable: true, align: 'center', type: 'calendar', options: { format: 'YYYY/MM/DD' }, }, { field: 'SONo', title: 'SONo', sortable: true, align: 'center', }, { field: 'SOItem', title: 'SOItem', sortable: true, align: 'center', }, { field: 'Material', title: 'Material', sortable: true, align: 'center', }, { field: 'SOQty', title: 'SOQty', sortable: true, align: 'center', }, { field: 'Vendor', title: 'Vendor', sortable: true, align: 'center', }, { field: 'PCPIC', title: 'PCPIC', sortable: true, align: 'center', }, { field: 'DPT', title: 'DPT', sortable: true, align: 'center', }, { field: 'Deliverydate', title: 'Deliverydate', sortable: true, align: 'center', type: 'calendar', options: { format: 'YYYY/MM/DD' }, }, { field: 'PONo', title: 'PONo', sortable: true, align: 'center', }, { field: 'POItem', title: 'POItem', sortable: true, align: 'center', }, { field: 'POqty', title: 'POqty', sortable: true, align: 'center', }, { field: 'PackGRBal', title: 'PackGRBal', sortable: true, align: 'center', }, { field: 'POIssDate', title: 'POIssDate', sortable: true, align: 'center', type: 'calendar', options: { format: 'YYYY/MM/DD' }, }, { field: 'Priorityorder', title: 'Priorityorder', sortable: true, align: 'center', }, { field: 'Lastreply', title: 'Lastreply', sortable: true, align: 'center', type: 'calendar', options: { format: 'YYYY/MM/DD' }, }, { field: 'WHreservation', title: 'WHreservation', sortable: true, align: 'center', }, { field: 'DRcode', title: 'DRcode', sortable: true, align: 'center', }, { field: 'Causeofdelay', title: 'Causeofdelay', sortable: true, align: 'center', }, { field: 'Targetdate', title: 'Targetdate', sortable: true, align: 'center', type: 'calendar', options: { format: 'YYYY/MM/DD' }, }, { field: 'TargetQTY', title: 'TargetQTY', sortable: true, align: 'center', }, { field: 'Column27', title: 'Column27', sortable: true, align: 'center', }, { field: 'Column10', title: 'Column10', sortable: true, align: 'center', }, { field: 'Remark', title: 'Remark', sortable: true, align: 'center', }, { field: 'Column19', title: 'Column19', sortable: true, align: 'center', }, { field: 'destination', title: 'destination', sortable: true, align: 'center', }, { field: 'supplier', title: 'supplier', sortable: true, align: 'center', }, { field: 'Orderstatus', title: 'Orderstatus', sortable: true, align: 'center', }, { field: 'Inlibrarystate', title: 'Inlibrarystate', sortable: true, align: 'center', }, { field: 'ConfrimDel', title: 'ConfrimDel', sortable: true, align: 'center', }, { field: 'Dateofdelivery', title: 'Dateofdelivery', sortable: true, align: 'center', }, { field: 'Supplierdeliverytime', title: 'Supplierdeliverytime', sortable: true, align: 'center', }, { field: 'Purchaseperiod', title: 'Purchaseperiod', sortable: true, align: 'center', }, { field: 'Ordercode', title: 'Ordercode', sortable: true, align: 'center', }, { field: 'SalesinvoiceNo', title: 'SalesinvoiceNo', sortable: true, align: 'center', }, { field: '明細No', title: '明細No', sortable: true, align: 'center', }, { field: 'ETDQTY', title: 'ETDQTY', sortable: true, align: 'center', }, { field: '納入期日', title: '納入期日', sortable: true, align: 'center', type: 'calendar', options: { format: 'YYYY/MM/DD' }, }, { field: 'date2', title: 'date2', sortable: true, align: 'center', type: 'calendar', options: { format: 'YYYY/MM/DD' }, }, { field: 'ShippingMethod', title: 'ShippingMethod', sortable: true, align: 'center', }, { field: 'Deliverytimestorage', title: 'Deliverytimestorage', sortable: true, align: 'center', }, { field: '購買発注No', title: '購買発注No', sortable: true, align: 'center', }, { field: 'NO', title: 'NO', sortable: true, align: 'center', }, { field: 'Destination2', title: 'Destination2', sortable: true, align: 'center', }, { field: 'Buyer', title: 'Buyer', sortable: true, align: 'center', }, { field: 'QTY', title: 'QTY', sortable: true, align: 'center', }, { field: 'Remarks', title: 'Remarks', sortable: true, align: 'center', }, { field: 'No3', title: 'No3', sortable: true, align: 'center', }, { field: 'item4', title: 'item4', sortable: true, align: 'center', }, { field: 'pgrp', title: 'pgrp', sortable: true, align: 'center', }, { field: 'ic', title: 'ic', sortable: true, align: 'center', }, { field: 'ac', title: 'ac', sortable: true, align: 'center', }, { field: 'grqty', title: 'grqty', sortable: true, align: 'center', }, { field: 'loc', title: 'loc', sortable: true, align: 'center', }, { field: 'confirmedqty', title: 'confirmedqty', sortable: true, align: 'center', }, { field: 'reason', title: 'reason', sortable: true, align: 'center', }, { field: 'KEY1', title: 'KEY1', sortable: true, align: 'center', }, { field: 'KEY2', title: 'KEY2', sortable: true, align: 'center', },
],
//事件必须先完成事件的function onchange: changed,//单元格变更事件 //onbeforechange: beforeChange, //oninsertrow: insertedRow, //oninsertcolumn: insertedColumn, //ondeleterow: deletedRow, //ondeletecolumn: deletedColumn, //onselection: selectionActive, //onsort: sort, //onresizerow: resizeRow, //onresizecolumn: resizeColumn, //onmoverow: moveRow, //onmovecolumn: moveColumn, //onload: loaded, //onblur: blur, //onfocus: focus, //onpaste: paste, });

//导出_按钮点击事件,格式为csv文件 OK $('#my_download').on('click', function () { document.getElementById('spreadsheet').jexcel.download(); });
//刷新_按钮点击事件 OK $('#my_refresh').on('click', function () { document.getElementById('spreadsheet').jexcel.refresh(); });
//更新数据_按钮点击事件 NG $('#my_updateTable').on('click', function () {
});
//打印_按钮点击事件 //$('#my_updateTable').on('click', function () { // document.getElementById('spreadsheet').jexcel.updateTable(); //});

</script>

<%--<script type="text/javascript">--%>

<%--//var changed = function (instance, cell, x, y, value) {
//注释:获取当前行号,列名，单元格值 //var DBID = document.getElementById('spreadsheet').jexcel.getRowData(x); //当前行号 //var ModifyValue = value; //修改后的值     //var FieldName = document.getElementById('spreadsheet').jexcel.getRowData(y) //当字段名 //var DBID = "5989"; //当前行号 //var ModifyValue = "S7160066"; //修改后的值 //var FieldName = "Shipto"; //当字段名 //var a; //这里的值,是无所谓的
//接收ajax返回的值时, ajax⼀定要设置为同步⽅式 //$.ajaxSetup({ // async: false //})
//往数据库更新值 // $.ajax({ // //url: "Handler2.ashx", // data: { "RequestType": "save_data", "ModifyValue": "S7160077" }, // datatype: "json",
// //data: { "RequestType": "save_data", "DBID": DBID, "ModifyValue": ModifyValue, "FieldName": FieldName },
// success: function (data1) { // //注释:返回结果,此处不需要了 // a = data1; // }, // error: function (error) { // alert(error.responseText); // }
// });//注释:ajax, 输入的值,保存到数据库-结束
// return a;
//} //changed事件结束了--%>--%><%--</script>--%></html>

posted @ 2023-04-20 16:10 AutomationAnywhere 阅读(257) 评论(0) 收藏举报

刷新页面返回顶部