欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

LOGO OA教程 ERP教程 模切知識交流 PMS教程 CRM教程 開發(fā)文檔 其他文檔  
 
網(wǎng)站管理員

如何在web中實(shí)現(xiàn)類似excel的表格控件

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

 Execl功能非常強(qiáng)大,內(nèi)置的很多函數(shù)或公式可以大大提高對數(shù)據(jù)的加工處理能力。那么在web中有沒有類似的控件呢?經(jīng)過一番搜尋,發(fā)現(xiàn)handsontable具備了基本的excel功能支持公式,同時能對數(shù)據(jù)進(jìn)行實(shí)時編輯。另外支持拖動復(fù)制、Ctrl+C 、Ctrl+V 等等。在瀏覽器支持方面,它支持以下的瀏覽器: IE7+, FF, Chrome, Safari, Opera。

     首先引入相關(guān)庫文件,公式支持不包含在handsontable.full.js中,需要單獨(dú)引入:

<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>

  <div id="handsontable-code"></div>

</body>

  在javascript代碼中,首先獲取div容器,然后創(chuàng)建表格控件:

<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) {

//計(jì)算列為只讀

//cellProperties.readOnly = true;

td.style.background = '#EEE';

newvalue = document.createElement('span');

$.ajax({

//提交數(shù)據(jù)的類型 POST GET

type: "POST",

//提交的網(wǎng)址

url: "/services/CSEngine.ashx",

//提交的數(shù)據(jù)

data: { code: value, code2: escaped },

//返回?cái)?shù)據(jù)的格式

datatype: "html",//"xml", "html", "script", "json", "jsonp", "text".

//在請求之前調(diào)用的函數(shù)

//beforeSend: function () { $("#msg").html("logining"); },

//成功返回之后調(diào)用的函數(shù)

success: function (data) {

// $("#msg").html(decodeURI(data));

newvalue.innerHTML = decodeURI(data);

},

//調(diào)用執(zhí)行后調(diào)用的函數(shù)

complete: function (XMLHttpRequest, textStatus) {

//alert(XMLHttpRequest.responseText);

// alert(textStatus);

//HideLoading();

},

//調(diào)用出錯執(zhí)行的函數(shù)

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進(jìn)行拖放,公式會變

  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是自己實(shí)現(xiàn)的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 = "參數(shù)錯誤";

            }

            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;

        }

    }

}

運(yùn)行代碼,如下:

 

轉(zhuǎn)自https://www.cnblogs.com/isaboy/p/spreadsheet_js_like_excel_formula_roslyn.html


該文章在 2024/7/27 9:40:46 編輯過
關(guān)鍵字查詢
相關(guān)文章
正在查詢...
點(diǎn)晴ERP是一款針對中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國內(nèi)大量中小企業(yè)的青睞。
點(diǎn)晴PMS碼頭管理系統(tǒng)主要針對港口碼頭集裝箱與散貨日常運(yùn)作、調(diào)度、堆場、車隊(duì)、財(cái)務(wù)費(fèi)用、相關(guān)報(bào)表等業(yè)務(wù)管理,結(jié)合碼頭的業(yè)務(wù)特點(diǎn),圍繞調(diào)度、堆場作業(yè)而開發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體,是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。
點(diǎn)晴WMS倉儲管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質(zhì)期管理,貨位管理,庫位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號管理軟件。
點(diǎn)晴免費(fèi)OA是一款軟件和通用服務(wù)都免費(fèi),不限功能、不限時間、不限用戶的免費(fèi)OA協(xié)同辦公管理系統(tǒng)。
Copyright 2010-2025 ClickSun All Rights Reserved