296 строки
9.9 KiB
HTML
296 строки
9.9 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<title>Essential JS 1 : Inline Form on Local data</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta charset="utf-8" />
|
|
<link href="../content/bootstrap.min.css" rel="stylesheet" />
|
|
<link href="../content/ejthemes/default-theme/ej.widgets.all.min.css" rel="stylesheet" />
|
|
<link href="../content/default.css" rel="stylesheet" />
|
|
<link href="../content/default-responsive.css" rel="stylesheet" />
|
|
<link href="../content/ejthemes/responsive-css/ej.responsive.css" rel="stylesheet" />
|
|
<!--[if lt IE 9]>
|
|
<script src="../scripts/jquery-1.11.3.min.js"></script>
|
|
<![end if]-->
|
|
<!--[if gte IE 9]> <!-->
|
|
<script src="../scripts/jquery-3.4.1.min.js"></script>
|
|
<!--<![end if]-->
|
|
<script src="../scripts/jquery.easing.1.3.min.js"></script>
|
|
<script src="../scripts/jquery.validate.min.js"></script>
|
|
<script src="../scripts/jquery.validate.unobtrusive.min.js"></script>
|
|
<script src="../scripts/jsondata.min.js"></script>
|
|
<script src="../scripts/jsrender.min.js"></script>
|
|
<script src="../scripts/ej.web.all.min.js" type="text/javascript"></script>
|
|
<script src="../scripts/properties.js" type="text/javascript"></script>
|
|
</head>
|
|
<body>
|
|
<div class="content-container-fluid">
|
|
<div class="row">
|
|
<div class="cols-sample-area">
|
|
<div id="Grid"></div>
|
|
</div>
|
|
<div id="sampleProperties">
|
|
<div class="prop-grid">
|
|
<div class="row">
|
|
<table>
|
|
<tr>
|
|
<td class="tdcls"><span class="txt">
|
|
<label>Select Formula</label></span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="tdcls">
|
|
<input id="formulaList" type="text" /></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="tdcls"><span class="txt">
|
|
<label>FormulaText</label></span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="tdcls">
|
|
<input id="formulabox" type="text" /></td>
|
|
</tr>
|
|
</table>
|
|
</br>
|
|
<div class="calcBox">
|
|
<button class="e-btn" id="calculateBtn">Calculate</button>
|
|
</div>
|
|
</br>
|
|
<table>
|
|
<tr>
|
|
<td class="tdcls"><span class="txt">
|
|
<label>Description</label></span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="tdcls">
|
|
<input id="description" type="text" /></td>
|
|
</tr></br>
|
|
<tr>
|
|
<td class="tdcls"><span class="txt">
|
|
<label>Result</label></span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="tdcls">
|
|
<input id="description" type="text" /></td>
|
|
</tr>
|
|
|
|
</table>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
$(function () {
|
|
|
|
var griddata = [{ sno: 1, a: 1, b: 2, c: 3, d: 4, e: 6, f: 7}, { sno: 2, a: 2, b: 4, c: 3, d: 4, e: 6, f: 7},
|
|
{ sno: 3, a: 3, b: 2, c: 3, d: 4, e: 6, f: 7}, { sno: 4, a: 1, b: 4, c: 3, d: 4, e: 6, f: 7},
|
|
{ sno: 3, a: 3, b: 2, c: 3, d: 4, e: 6, f: 7}, { sno: 4, a: 1, b: 4, c: 3, d: 4, e: 6, f: 7},
|
|
{ sno: 3, a: 3, b: 2, c: 3, d: 4, e: 6, f: 7}, { sno: 4, a: 1, b: 4, c: 3, d: 4, e: 6, f: 7},
|
|
{ sno: 5, a: 5, b: 8, c: 3, d: 4, e: 6, f: 7}, { sno: 6, a: 6, b: 6, c: 3, d: 4, e: 6, f: 7}]
|
|
|
|
var element = $("#Grid");
|
|
element.ejGrid({
|
|
dataSource: griddata,//ej.DataManager(window.gridData).executeLocal(ej.Query().take(100)),//
|
|
editSettings: { allowEditing: true, allowAdding: true, editMode: ej.Grid.EditMode.Batch },
|
|
columns: [
|
|
{ field: "sno", headerText: "sno", isPrimaryKey: true, visible: false },
|
|
{ field: "a", headerText: "A", type: "string" },
|
|
{ field: "b", headerText: "B", type: "string" },
|
|
{ field: "c", headerText: "C", type: "string" },
|
|
{ field: "d", headerText: "D", type: "string" },
|
|
{ field: "e", headerText: "E", type: "string" },
|
|
{ field: "f", headerText: "F", type: "string" },
|
|
{ field: "g", headerText: "G", type: "string" },
|
|
|
|
],
|
|
toolbarSettings: { showToolbar: true, toolbarItems: ['update', 'cancel'] },
|
|
|
|
|
|
});
|
|
var formulaCountList = calcObj.getLibraryFunctions().keys()
|
|
$("#formulaList").ejDropDownList({ "change": "selectChange", dataSource:formulaCountList ,width: "120px",selectedItemIndex:0});
|
|
|
|
|
|
});
|
|
var calcObj = new CalcEngine($("#Grid").data("ejGrid"));
|
|
calcObj.setUseDependencies(true);
|
|
calcObj.registerGridAsSheet("Sheet1", "Sheet1", "0");
|
|
|
|
$("#sampleProperties").ejPropertiesPanel();
|
|
|
|
$("#calculateBtn").ejButton({
|
|
|
|
width: "180px", // set the width for the Button
|
|
|
|
height: "35px", // set the height for the button
|
|
|
|
showRoundedCorner: true, // set the rounded corner option to true
|
|
|
|
click: "calculateClick" // set click event of button
|
|
|
|
});
|
|
function calculateClick() {
|
|
|
|
var dropdown = $('#formulaList').data("ejDropDownList");
|
|
var selectedFormula = dropdown.getValue();
|
|
XMLname = "CalcEngine.xml";
|
|
$.ajax({
|
|
type: "GET",
|
|
url: XMLname,
|
|
dataType: "xml",
|
|
success: function (xml) {
|
|
alert(XMLname);
|
|
}
|
|
});
|
|
|
|
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
|
|
xmlDoc.async = false;
|
|
xmlDoc.load(XMLname);
|
|
var M = xmlDoc.getElementsByTagName(selectedFormula);
|
|
|
|
return xmlDoc;
|
|
alert(M);
|
|
}
|
|
|
|
function loadXMLDoc(XMLname)
|
|
{
|
|
var xmlDoc;
|
|
if (window.XMLHttpRequest)
|
|
{
|
|
xmlDoc=new window.XMLHttpRequest();
|
|
xmlDoc.open("GET",XMLname,false);
|
|
xmlDoc.send("");
|
|
return xmlDoc.responseXML;
|
|
}
|
|
|
|
else if (ActiveXObject("Microsoft.XMLDOM"))
|
|
{
|
|
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
|
|
xmlDoc.async=false;
|
|
xmlDoc.load(XMLname);
|
|
return xmlDoc;
|
|
}
|
|
alert("Error loading document!");
|
|
return null;
|
|
}
|
|
function selectChange(args) {
|
|
var gridObj = $("#Grid").data("ejGrid");
|
|
if (gridObj.model.isEdit)
|
|
$("#Grid").ejGrid("cancelEdit");
|
|
if (this.getSelectedValue() == "inlineformtemplate")
|
|
$("#Grid").ejGrid("option", { "editSettings": { editMode: this.getSelectedValue(), inlineFormTemplateID: "#template" } });
|
|
else
|
|
$("#Grid").ejGrid("option", { "editSettings": { editMode: this.getSelectedValue() } });
|
|
}
|
|
function complete(args) {
|
|
if ((args.requestType == "beginedit" || args.requestType == "add") && args.model.editSettings.editMode == "inlineformtemplate") {
|
|
$("#Freight").ejNumericTextbox({ value: parseFloat($("#Freight").val()), width: "116px", height: "28px", decimalPlaces: 2 });
|
|
$("#Freight").css({ 'text-align': 'left' });
|
|
$("#ShipCountry").ejDropDownList({ width: '116px' });
|
|
args.requestType == "beginedit" && $("#ShipCountry").ejDropDownList("setSelectedValue", args.row.children().eq(3).text());
|
|
$(".e-field").css({ 'width': '116px', 'text-align': 'left' });
|
|
}
|
|
}
|
|
|
|
|
|
calcObj.getValueRowCol = function (sheetID, row, col) {
|
|
var rowData = $("#Grid").data("ejGrid").model.dataSource[Number(row) - 1];
|
|
var data = "";
|
|
switch (col) {
|
|
case 1:
|
|
data = rowData.a;
|
|
break;
|
|
case 2:
|
|
data = rowData.b;
|
|
break;
|
|
case 3:
|
|
data = rowData.c;
|
|
break;
|
|
case 4:
|
|
data = rowData.d;
|
|
break;
|
|
case 5:
|
|
data = rowData.e;
|
|
break;
|
|
case 6:
|
|
data = rowData.f;
|
|
break;
|
|
case 7:
|
|
data = rowData.g;
|
|
break;
|
|
default:
|
|
data = "";
|
|
break;
|
|
}
|
|
return data;
|
|
}
|
|
|
|
calcObj.setValueRowCol = function (sheetID, value, row, col) {
|
|
//var rowData = grid.model.currentViewData[Number(row) - 1];
|
|
var rowData = $("#Grid").data("ejGrid").model.dataSource[Number(row) - 1];
|
|
var data = "";
|
|
switch (col) {
|
|
case 1:
|
|
rowData.a = value;
|
|
break;
|
|
case 2:
|
|
rowData.b = value;
|
|
break;
|
|
case 3:
|
|
rowData.c = value;
|
|
break;
|
|
case 4:
|
|
rowData.d = value;
|
|
break;
|
|
case 5:
|
|
rowData.e = value;
|
|
break;
|
|
case 6:
|
|
rowData.f = value;
|
|
break;
|
|
case 7:
|
|
rowData.g = value;
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
|
|
|
|
</script>
|
|
<style type="text/css" class="cssStyles">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.calcBox
|
|
|
|
{
|
|
|
|
margin-left: 0px;
|
|
|
|
margin-top: 5px;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tdcls
|
|
|
|
{
|
|
|
|
width: 200px;
|
|
|
|
}
|
|
|
|
|
|
|
|
</style>
|
|
</body>
|
|
</html>
|