iggrid

by sarunokoshikake

HTML

<script src="https://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/2017.2/latest/js/i18n/infragistics-ja.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/2017.2/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/2017.2/latest/js/infragistics.lob.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/2017.2/latest/js/modules/i18n/regional/infragistics.ui.regional-ja.js"></script>
<script src="https://igniteui.github.io/help-samples/data-files/adventureworks.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/2017.2/latest/js/infragistics.loader.js"></script>
<script src="https://igniteui.github.io/help-samples/js/FileSaver.js"></script>
<script src="https://igniteui.github.io/help-samples/data-files/adventureworks.min.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/2017.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet">
<link href="https://cdn-na.infragistics.com/igniteui/2017.2/latest/css/structure/infragistics.css" rel="stylesheet">
<input type="button" id="exportButton" value="Excel出力">
<table id="grid"></table>

CSS

body { font-size: 10px; }
table {
  margin: 0 auto;
  width: 400px;
}
table, th, td {
  border: 1px solid #ccc;
  border-collapse: collapse;
}
th, td {
  padding: 1px 1px
}
th {
  background-color: #666;
  color: #fff;
}
/* この下にあるodd,evenクラスは、jQueryで色を付ける場合に使用します。 */
.odd {
  background-color: #eeffff;
}
.even {
  background-color: #ffeeff;
}

JavaScript

$(function () {
    $.ig.loader({
        scriptPath: "https://cdn-na.infragistics.com/igniteui/latest/js/",
        cssPath: "https://cdn-na.infragistics.com/igniteui/latest/css/",
        resources: 'igGrid.Sorting.Filtering,' +
            'igGridExcelExporter'
    });

    $.ig.loader(function () {
      var getMeasureData = [
				{
				  measure_management_id: 29,
				  status: 1,
				  disclosure_type: 1,
				  agent_name: null,
				  agent_contract_name: null,
				  client_admin_name: "齋藤弘樹",
				  client_id: 201647,
				  client_name: "ライフカード株式会社 ",
				  publisher_id: 1248959,
				  publisher_name: "株式会社ジェーピーツーワン",
				  publisher_admin_name: "北島翔太",
				  media_id: 1412944,
				  media_name: "クレジットカード財津ラボ",
				  media_url:  "http://creditcard.zaitsu-labs.com/",
				  promotion_sub_category:  "金融・クレジットカード ",
				  promotion_id: 303044,
				  promotion_name: "ライフカード",
				  thanks_id: 10873,
				  thanks_name: "クレジットカード発券",
				  unit_price_type: 0,
				  unit_price_money_in: 7350,
				  unit_price_money_out: 7000,
				  unit_price_money_margin: 350,
				  fixed_cost_type: 0,
				  fixed_cost_money_in: 1050000,
				  fixed_cost_money_out: 1000000,
				  fixed_cost_money_margin: 50000,
				  table_current_fixed_cost_money_in: null,
				  table_current_fixed_cost_money_out: null,
				  table_current_fixed_cost_margin: null,
				  target_action_count: 1000,
				  acquisition_action_count: null,
				  landing_action_count: null,
				  divergence_action_count: null,
				  required_action_count_per_day: null,
				  start_date: "2017/08/01",
				  end_date: "2018/08/31",
				  registant_user_name: "北島翔太",
				  create_date: "2017/07/26"
				},
				{
				  measure_management_id: 28,
				  status: 0,
				  disclosure_type: 0,
				  agent_name: null,
				  agent_contract_name: null,
				  client_admin_name: "武内大弥",
				  client_id: 202698,
				  client_name: "株式会社オリエントコーポレーション",
				  publisher_id: 1280951,
				  publisher_name: "株式会社エスポワール",
				 ...