ひろしブック: Wijmoサンプル

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>


<link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" title="rocket-jqueryui" />


<link href="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.1.0.min.css" rel="stylesheet" type="text/css" />


<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.2.1.0.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.1.0.min.js" type="text/javascript"></script>

<script type="text/javascript" src="http://cdn.wijmo.com/external/require.js"></script>
<script>

//TODO:jQueryに組み込む
$(function () {
//必須チェック
$('#login').click(function(){
var strDate　=　$('#txtdate1').val().trim().split("/");
//alert(date1[0]);
var intYear = strDate[0]*1;
var intMon = strDate[1]*1;
var intDay = strDate[2]*1;
//alert(inputedDate=date1[2]);//01
//alert(inputedDate=date1[2]*1);//1になってくれた
var today = new Date();

if(intDay !== today.getDate())
{
alert("日付が現在日と一致してない");
return fasle;
}else{
//月が同じ？
}

if(intDay >= today.getDate())
{
alert("日付が現在日よりすぎてる");
}

if(intDay <= today.getDate())
{
alert("日付が現在日より前");
}

//alert(today);
//alert(today.getYear());
alert(today.getFullYear());
alert(today.getMonth()+1);//0から //5
alert(today.getDate());//1 一桁ものは、考慮が必要ね

})

});

</script>
<script type="text/javascript">
requirejs.config({
baseUrl: "http://cdn.wijmo.com/amd-js/3.20143.59",
paths: {
"jquery": "jquery-1.11.1.min",
"jquery-ui": "jquery-ui-1.11.0.custom.min",
"jquery.ui": "jquery-ui",
"jquery.mousewheel": "jquery.mousewheel.min",
"globalize": "globalize.min",
"bootstrap": "bootstrap.min", //Needed if you use Bootstrap.
"knockout": "knockout-3.1.0" //Needed if you use Knockout.
}
});
</script>
<title>Login</title>
</head>
<body>
<div class="container">
<div class="container">
<form id="frmInput" name="frmInput" method="post" >
<div class="row">
<div class="col-sm-3">
</div>
<div class="col-sm-2">
<label for="txtdate1" class="lbl" >日付</label>
</div>
<div class="col-sm-7">
<input id="txtdate1" class="txt" name="date1" type="text" id="date1" placeholder="date1" value="2015/05/01"/>
</div>
<input type="button" id="login" value="チェック"/>
</div>
</form>
</div>
<script id="scriptInit" type="text/javascript">
require(["globalize.cultures"], function () {
Globalize.culture("ja-JP");
});

require(["wijmo.wijgrid"], function () {
$(document).ready(function () {

// bind the grid
$("#demo").wijgrid({
editingMode: "cell",
allowKeyboardNavigation: true,
highlightCurrentCell: true,
selectionMode: "none",
afterCellEdit: onAfterCellEdit,
allowSorting: true,
data: getData(12),
columnsAutogenerationMode: "none",
columns: [
{ dataKey: "Country", headerText: "Country", dataType: "string", aggregate: "count", readonly :false, footerText: "Count: <b>{0}</b>" },
{ dataKey: "ProductName", headerText: "Product Name", dataType: "string" },
{ dataKey: "UnitPrice", headerText: "Unit Price", dataType: "currency", aggregate: "average", footerText: "Avg: <b>{0}</b>" },
{ dataKey: "Quantity", headerText: "Quantity", dataType: "number", dataFormatString: "n0", aggregate: "sum", footerText: "Sum: <b>{0}</b>" },
{ dataKey: "Discount", headerText: "Discount", dataType: "number", dataFormatString: "p0", aggregate: "max", footerText: "Max: <b>{0}</b>" },
{ dataKey: "OrderDate", headerText: "Order Date", dataType: "datetime", dataFormatString: "MMM-dd-yyyy", textAlignment: "center" },
{ dataKey: "Overseas", headerText: "Overseas", dataType: "boolean" }
] ,
loaded: function (e) {
var _event = e;
//$("#demo")
//表の値取得
var gridArray= $("#demo").wijgrid("option", "data");
//ループで、値を見て、プロパティを変える？
//セルPropertyとれるのか？
var target = e.target

var rows = e.target.rows
var lenRows = rows.length//ヘッダー行含む
rows[1].cells[2].disabled = true;
rows[1].cells[6].disabled = true;
//長さ分ループして、gridArrayと比較。
//比較のフラグを見て、プロパティを変える？

//alert(lenRows)

var pageSize = $("#demo").wijgrid("option", "pageSize");

}

});
});
});

// perform validation after edits
function onAfterCellEdit(e, args) {

// check the new cell value
var valid = true;
var value = args.cell.value();
switch (args.cell.column().dataKey) {
case "UnitPrice":
case "Quantity":
if (value < 0) valid = false;
if(!valid) alert("数値は0以上");
break;
case "Discount":
if (value < 0 || value > .3) valid = false;
break;
}

// if invalid, apply error style to the cell
if (!valid) {
$(args.cell.container()).addClass("ui-state-error");
} else {
$(args.cell.container()).removeClass("ui-state-error");
}
}

// random data generators
function getData(count) {
var data = [];
var country = "USA,UK,Germany,Italy,Japan,Brazil,Canada".split(",");
var name = "Lorem,Ipsum,Dolor,Amet,Consectetur".split(",");
var suffix = "LLC,Inc".split(",");
for (var i = 0; i < count; i++) {
data.push({
TransactionID: i,
Country: getString(country),
ProductName: getString(name) + " " + getString(suffix),
UnitPrice: Math.floor(getNumber(5, 10)),
Quantity: Math.floor(getNumber(1, 5)) * 10,
Discount: getNumber(0, 0.3),
OrderDate: getDate(i),
Overseas: Math.random() > 0.8
});
}
return data;
}
function getString(arr) {
return arr[Math.floor((Math.random() * arr.length))];
}
function getNumber(lo, hi) {
return lo + Math.random() * (hi - lo);
}
function getDate(daysAgo) {
return new Date((new Date()).getTime() - daysAgo * 24 * 3600 * 1000);
}
</script>

<div class="container">
<div class="header">
<h2>Editing</h2>
</div>

<div class="main demo">

<table id="demo">
</table>


<div class="demo-options">


</div>
</div>
<div class="footer demo-description">
<p>
このサンプルではeditingMode オプションを "cell"に設定してグリッドを編集する方法を紹介します。
</p>
<p>
ユーザーが編集したいセルを選択するには、キーボードを使用できるようにサンプルもallowKeyboardNavigationをtrueに設定します。
</p>
<p>
サンプルでは、検証を実行するafterCellEditイベントを使用する方法を説明します。
</p>
</div>
</div>

</div>
</body>
</html>

ひろしブック

2015年5月31日日曜日

Wijmoサンプル

0 件のコメント:

コメントを投稿