放课后にゃんにゃん在线,看特级黄色片,色在线影院

如何在web中實現類似excel的表格控件

freeflydom

2024年7月27日 9:39 本文熱度 1101

　Execl功能非常強大，內置的很多函數或公式可以大大提高對數據的加工處理能力。那么在web中有沒有類似的控件呢？經過一番搜尋，發現handsontable具備了基本的excel功能支持公式，同時能對數據進行實時編輯。另外支持拖動復制、Ctrl+C 、Ctrl+V 等等。在瀏覽器支持方面，它支持以下的瀏覽器： IE7+, FF, Chrome, Safari, Opera。

首先引入相關庫文件，公式支持不包含在handsontable.full.js中，需要單獨引入：

<script src="http://handsontable.github.io/handsontable-ruleJS/lib/jquery/jquery-1.10.2.js"></script>
<script src="http://handsontable.github.io/handsontable-ruleJS/lib/handsontable/handsontable.full.js"></script>
<link rel="stylesheet" media="screen" href="http://handsontable.github.io/handsontable-ruleJS/lib/handsontable/handsontable.full.css">
<script src="http://handsontable.github.io/handsontable-ruleJS/lib/RuleJS/lib/lodash/lodash.js"></script>
<script src="http://handsontable.github.io/handsontable-ruleJS/lib/RuleJS/lib/underscore.string/underscore.string.js"></script>
<script src="http://handsontable.github.io/handsontable-ruleJS/lib/RuleJS/lib/moment/moment.js"></script>
<script src="http://handsontable.github.io/handsontable-ruleJS/lib/RuleJS/lib/numeral/numeral.js"></script>
<script src="http://handsontable.github.io/handsontable-ruleJS/lib/RuleJS/lib/numericjs/numeric.js"></script>
<script src="http://handsontable.github.io/handsontable-ruleJS/lib/RuleJS/lib/js-md5/md5.js"></script>
<script src="http://handsontable.github.io/handsontable-ruleJS/lib/RuleJS/lib/jstat/jstat.js"></script>
<script src="http://handsontable.github.io/handsontable-ruleJS/lib/RuleJS/lib/formulajs/formula.js"></script>
<script src="http://handsontable.github.io/handsontable-ruleJS/lib/RuleJS/js/parser.js"></script>
<script src="http://handsontable.github.io/handsontable-ruleJS/lib/RuleJS/js/ruleJS.js"></script>
<script src="http://handsontable.github.io/handsontable-ruleJS/lib/handsontable/handsontable.formula.js"></script>

在HTML中放置一個Div容器來存放handsontable控件：

<body>

</body>

在javascript代碼中，首先獲取div容器，然后創建表格控件：

<script type="text/javascript">
$(document).ready(function () {
  var data1 = [
    ['=$B$2', "Maserati", "Mazda", "return 1+2;", 'return DataAccess.getScalar("select top 1 name from Cloud_Users where cellPhone=15895211486");', "=A$1"],
    [2009, 0, 2941, 4303, 354, 5814],
    [2010, 5, 2905, 2867, '=SUM(A4,2,3)', '=$B1'],
    [2011, 4, 2517, 4822, 552, 6127],
    [2012, '=SUM(A2:A5)', '=SUM(B5,E3)', '=A2/B2', 12, 4151]
  ];
function negativeValueRenderer(instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
var escaped = Handsontable.helper.stringify(value),
newvalue;
if (escaped.indexOf('return') === 0) {
//計算列為只讀
//cellProperties.readOnly = true;
td.style.background = '#EEE';
newvalue = document.createElement('span');
$.ajax({
//提交數據的類型 POST GET
type: "POST",
//提交的網址
url: "/services/CSEngine.ashx",
//提交的數據
data: { code: value, code2: escaped },
//返回數據的格式
datatype: "html",//"xml", "html", "script", "json", "jsonp", "text".
//在請求之前調用的函數
//beforeSend: function () { $("#msg").html("logining"); },
//成功返回之后調用的函數
success: function (data) {
 // $("#msg").html(decodeURI(data));
 newvalue.innerHTML = decodeURI(data);
},
//調用執行后調用的函數
complete: function (XMLHttpRequest, textStatus) {
 //alert(XMLHttpRequest.responseText);
 // alert(textStatus);
 //HideLoading();
},
//調用出錯執行的函數
error: function () {
 //請求出錯處理
 // alert('error')
}
});
Handsontable.Dom.addEvent(newvalue, 'mousedown', function (e) {
 e.preventDefault(); // prevent selection quirk
});
Handsontable.Dom.empty(td);
td.appendChild(newvalue);
}
// if row contains negative number
if (parseInt(value, 10) < 0) {
 // add class "negative"
 td.className = 'negative';
}
}
  //類似excel進行拖放，公式會變
  var container1 = $('#handsontable-code');
  Handsontable.renderers.registerRenderer('negativeValueRenderer', negativeValueRenderer);
  container1.handsontable({
    data: data1,
    minSpareRows: 1,
    colHeaders: true,
    rowHeaders: true,
    contextMenu: true,
    manualColumnResize: true,
    formulas: true,
      cells: function (row, col, prop) {
var cellProperties = {};
var escaped = Handsontable.helper.stringify(this.instance.getData()[row][col]);
if (escaped.indexOf('return')===0) {
 cellProperties.renderer = "negativeValueRenderer";
}
return cellProperties;
}
  });
});
</script>

其中 =SUM(B5,E3)的公式是RuleJs提供的，return 1+2是自己實現的C#代碼腳本，需要單擊解析：

public class CSEngine : IHttpHandler {
    private static int count = 0;
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        try
        {
            count++;
            string ret = "";
            string code = context.Request["code"].ToString();
            if (string.IsNullOrEmpty(code))
            {
                ret = "參數錯誤";
            }
            else
            {
                ScriptOptions options = ScriptOptions.Default
                  .AddReferences(
                      Assembly.GetAssembly(typeof(DBServices.DataAccess))
                   )
                  //.AddImports("System.Data")
                  //.AddImports("System.Data.SqlClient")
                  .AddImports("DBServices");
                var state = CSharpScript.RunAsync(code, options).Result.ReturnValue;
                ret = state.ToString();


                state = null;
                options = null;
            }
            Console.WriteLine(count);
            context.Response.Write(ret);
        }
        catch(Exception ex)
        {
            //error
            Console.WriteLine(count);
        }
    }
    public bool IsReusable {
        get {
            return false;
        }
    }
}

運行代碼，如下：

轉自https://www.cnblogs.com/isaboy/p/spreadsheet_js_like_excel_formula_roslyn.html

該文章在 2024/7/27 9:40:46 編輯過

關鍵字查詢

實現

控件

表格

excel

正在查詢...

點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。

點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理，結合碼頭的業務特點，圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體，是物流碼頭及其他港口類企業的高效ERP管理信息系統。

點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。

點晴免費OA是一款軟件和通用服務都免費，不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。

狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

如何在web中實現類似excel的表格控件