{"id":1651,"date":"2019-12-24T17:06:22","date_gmt":"2019-12-24T08:06:22","guid":{"rendered":"https:\/\/esoro.jp\/?p=1651"},"modified":"2020-10-20T07:39:13","modified_gmt":"2020-10-19T22:39:13","slug":"w2ui%e3%81%a7%e3%83%86%e3%83%bc%e3%83%96%e3%83%ab%e3%83%a1%e3%83%b3%e3%83%86%e3%83%8a%e3%83%b3%e3%82%b9%e7%94%bb%e9%9d%a2%e3%82%92%e4%bd%9c%e3%81%a3%e3%81%a6%e3%81%bf%e3%82%8b","status":"publish","type":"post","link":"https:\/\/esoro.jp\/?p=1651","title":{"rendered":"w2ui\u3067\u30c6\u30fc\u30d6\u30eb\u30e1\u30f3\u30c6\u30ca\u30f3\u30b9\u753b\u9762\u3092\u4f5c\u3063\u3066\u307f\u308b"},"content":{"rendered":"

SpringBoot\u3067\u4f5c\u3063\u3066\u3044\u308b\u30a2\u30d7\u30ea\u306b\u3001\u30c6\u30fc\u30d6\u30eb\u30e1\u30f3\u30c6\u30ca\u30f3\u30b9\u753b\u9762\u304c\u5fc5\u8981\u306b\u306a\u3063\u305f\u306e\u3067\u3001w2ui\u3067\u4f5c\u3063\u3066\u307f\u308b\u4e8b\u306b\u3057\u307e\u3057\u305f\u3002
\n[blogcard url=”http:\/\/w2ui.com\/web”]
\n\u30c6\u30fc\u30d6\u30eb\u30e1\u30f3\u30c6\u30ca\u30f3\u30b9\u753b\u9762\u3068\u3044\u3048\u3070\u3001\u4e00\u89a7\u8868\u793a\u304c\u3042\u3063\u3066\u3001\u9078\u629e\u3057\u305f\u3089\u767b\u9332\u30d5\u30a9\u30fc\u30e0\u304c\u8868\u793a\u3055\u308c\u3066\u3001\u3068\u304b\u57fa\u672c\u7684\u306a\u69cb\u6210\u306f\u3069\u306e\u30c6\u30fc\u30d6\u30eb\u3082\u4f3c\u305f\u3088\u3046\u306a\u3082\u306e\u3067\u3059\u3088\u306d\u3002w2ui\u306e\u30b0\u30ea\u30c3\u30c9\u3068\u30d5\u30a9\u30fc\u30e0\u3092\u4f7f\u3044\u3001\u4f7f\u3044\u307e\u308f\u3057\u51fa\u6765\u308b\u3088\u3046javascript\u306b\u6a5f\u80fd\u3092\u7e8f\u3081\u3001html\u5074\u306b\u30c6\u30fc\u30d6\u30eb\u56fa\u6709\u306e\u500b\u5225\u8a2d\u5b9a\u3092\u5bc4\u305b\u308b\u4e8b\u3067\u3001\u3044\u308d\u3093\u306a\u30c6\u30fc\u30d6\u30eb\u306b\u5bfe\u5fdc\u51fa\u6765\u308b\u3088\u3046\u306a\u5f62\u306b\u3057\u3066\u3044\u304d\u307e\u3059\u3002
\nw2ui\u306eform\u306f\u3001url\u3092\u6307\u5b9a\u3059\u308b\u3068this.save()\u3067\u30d5\u30a9\u30fc\u30e0\u3092POST\u3057\u3066\u304f\u308c\u308b\u3088\u3046\u306a\u306e\u3067\u3059\u304c\u3001\u3061\u3087\u3063\u3068\u6271\u3044\u306b\u304f\u3044\u306e\u3067save\u3092\u4f7f\u308f\u305a\u306bjson\u3067POST\u3059\u308b\u3088\u3046\u306b\u3057\u307e\u3057\u305f\u3002<\/p>\n

eclipse\u4e0a\u306e\u30ea\u30bd\u30fc\u30b9\u69cb\u6210\u306f\u3053\u3093\u306a\u611f\u3058\u3067\u3059\u3002<\/p>\n

\"\"<\/a><\/p>\n

javascript\u3067\u3059\u3002\u3061\u3087\u3063\u3068\u5909\u66f4\u5f8c\u306eUI\u306e\u52d5\u304d\u304c\u30a2\u30d0\u30a6\u30c8\u3067\u306f\u3042\u308a\u307e\u3059\u304c\u3002\u3002<\/p>\n

\/\/\u7de8\u96c6\u8868\u793a\r\nfunction showEditForm(isEdit){\r\n   $('#data-form').show(); \r\n   $('#data-grid').hide(); \r\n\tw2ui['data_form'].clear();\r\n\tw2ui['data_form'].header = uiName;\r\n\t\r\n\tif(isEdit){\r\n\t\tvar sel = w2ui['data_grid'].getSelection();\r\n\t\tif (sel.length == 1) {\r\n        \tvar record = w2ui['data_grid'].get(sel[0]);\r\n        \tw2ui['data_form'].record = record;\r\n\t\t}\r\n\t}\r\n    w2ui['data_form'].refresh();\r\n}\r\n\r\n\/\/\u4e00\u89a7\u8868\u793a\r\nfunction showGrid(){\r\n   $('#data-grid').show(); \r\n   $('#data-form').hide(); \r\n   $.ajax({\r\n      headers:{ \"Accept\":\"text\/html,application\/xhtml+xml,application\/xml,application\/json\",},\r\n      url:gridURL})\r\n      .fail((jqXHR, textStatus, errorThrown) => {\r\n         if( jqXHR.status == 404 ){\r\n            w2alert('\u8a72\u5f53\u3059\u308b\u30c7\u30fc\u30bf\u306f\u3042\u308a\u307e\u305b\u3093'+ jqXHR.responseText, uiName);\r\n         }else{\r\n            w2alert('\u30c7\u30fc\u30bf\u304c\u53d6\u5f97\u51fa\u6765\u307e\u305b\u3093\u3067\u3057\u305f\u3002 ' + jqXHR.status + jqXHR.responseText, uiName);\r\n         }\r\n      })\r\n      .done((data, textStatus, jqXHR) => {\r\n         if(data == \"\"){\r\n            w2alert('\u8a72\u5f53\u3059\u308b\u60c5\u5831\u306f\u3042\u308a\u307e\u305b\u3093', uiName);\r\n            return;\r\n         }\r\n         var json=JSON.parse(data);\r\n         var idx = 0;\r\n         if(!Array.isArray(json)){\r\n            json = JSON.parse('[' + JSON.stringify(json) + ']');\r\n         }\r\n         for(var item of json){\r\n            idx++;\r\n            item['recid']=idx;\r\n         }\r\n         w2ui['data_grid'].clear();\r\n         w2ui['data_grid'].records = json;\r\n         w2ui['data_grid'].refresh();\r\n       });\r\n}\r\n\r\nw2utils.locale({\r\n    \"phrases\" : {\r\n        \"Save\": \"\u9589\u3058\u308b\",\r\n        \"Hide\": \"\u96a0\u3059\",\r\n        \"Add New\": \"\u8ffd\u52a0\",\r\n        \"Edit\": \"\u7de8\u96c6\",\r\n        \"Delete\": \"\u524a\u9664\",\r\n        \"Confirmation\": \"\u78ba\u8a8d\",\r\n        \"Yes\": \"\u306f\u3044\",\r\n        \"No\": \"\u3044\u3044\u3048\",\r\n        \"Reload data in the list\": \"\u4e00\u89a7\u3092\u518d\u8868\u793a\u3057\u307e\u3059\",\r\n        \"Edit selected record\": \"\u9078\u629e\u3057\u305f\u8a2d\u5b9a\u3092\u7de8\u96c6\u3057\u307e\u3059\",\r\n        \"Required field\": \"\u5165\u529b\u5fc5\u9808\u9805\u76ee\u3067\u3059\",\r\n        \"Add new record\": \"\u65b0\u898f\u306b\u8a2d\u5b9a\u3092\u8ffd\u52a0\u3057\u307e\u3059\",\r\n        \"Delete selected records\": \"\u9078\u629e\u3057\u305f\u8a2d\u5b9a\u3092\u524a\u9664\u3057\u307e\u3059\",\r\n        \"Are you sure you want to delete selected records?\": \"\u9078\u629e\u3057\u305f\u8a2d\u5b9a\u3092\u524a\u9664\u3057\u307e\u3059\u3002\u3088\u308d\u3057\u3044\u3067\u3059\u304b\uff1f\"\r\n    }\r\n});\r\n\r\n\/\/\u66f4\u65b0\u8981\u6c42\r\nfunction ajaxRequest(url, method, JSON, msg){\r\n\tvar deferred = new $.Deferred();\r\n \tw2confirm( msg +'\u3057\u307e\u3059\u3002\u3088\u308d\u3057\u3044\u3067\u3059\u304b\uff1f')\r\n\t.yes(function () { \r\n\t\t$.ajax({\r\n\t        type: method,\r\n\t        url: url,\r\n\t        data: JSON,\r\n\t        contentType: 'application\/JSON',\r\n\t        dataType : 'JSON',\r\n\t        scriptCharset: 'utf-8',\r\n\t        })\r\n\t        .fail((jqXHR, textStatus, errorThrown) => {\r\n\t           w2alert(msg + '\u306b\u5931\u6557\u3057\u307e\u3057\u305f' + jqXHR.status + jqXHR.responseText, uiName).done(function () {\r\n\t\t        \tdeferred.resolve();\r\n\t           });\r\n\t        })\r\n\t        .done((data, textStatus, jqXHR) => {\r\n\t           w2alert(msg + '\u3057\u307e\u3057\u305f', uiName).done(function () {\r\n\t\t        \tdeferred.resolve();\r\n\t           });\r\n\t        });\r\n\t});\r\n \treturn deferred;\r\n}\r\n\r\n$('#data-grid').w2grid({\r\n    header: uiName,\r\n    show: { header: true, toolbar: true, toolbarEdit: true, toolbarAdd: true, toolbarDelete: true, toolbarReload: true, toolbarColumns: false, toolbarSearch: false },\r\n    name: 'data_grid',\r\n    multiSelect : false,\r\n    onReload: function(event) {\r\n    \tshowGrid();\r\n    },\r\n    onAdd: function (event) {\r\n    \tshowEditForm(false);\r\n    },\r\n    onEdit: function (event) {\r\n    \tshowEditForm(true);\r\n    },\r\n    onDelete: function (event) {\r\n    \tevent.preventDefault();\r\n       \tvar record = this.get(this.getSelection());\r\n    \tvar deleteJSON = JSON.stringify(record[0]);\r\n    \tvar deferred = ajaxRequest(formURL, 'delete', deleteJSON, '\u524a\u9664');\r\n    \tdeferred.done(function(){\r\n    \t\tsetTimeout(function(){showGrid()},500);\r\n    \t});\r\n    },\r\n    columns: gridColumns,\r\n});\r\n\r\n$('#data-form').w2form({ \r\n    name  : 'data_form',\r\n    header: uiName,\r\n\/\/    url   : formURL,\r\n    fields: formColumns,\r\n    actions: {\r\n        '\u66f4\u65b0': function (event) {\r\n        \tif( this.validate(true).length == 0 ){\r\n      \t    \tvar postData = this.record;\r\n      \t    \tvar postJSON = JSON.stringify(postData);\r\n      \t    \tajaxRequest(formURL, 'post', postJSON, '\u66f4\u65b0');\r\n        \t}\r\n        },\r\n        '\u30ad\u30e3\u30f3\u30bb\u30eb': function (event) {\r\n            showGrid();\r\n            this.clear();\r\n        }\r\n    }\r\n});\r\n<\/pre>\n
html\u306b\u306fjs\u3067\u5b9a\u7fa9\u6e08\u306e\u8981\u7d20\u3068\u304b\u5909\u6570\u3092\u8f09\u305b\u307e\u3059\u3002\u30e1\u30f3\u30c6\u5bfe\u8c61\u306e\u30c6\u30fc\u30d6\u30eb\u304c\u5897\u3048\u305f\u5834\u5408\u3092\u8003\u616e\u3057\u30c4\u30fc\u30eb\u30d0\u30fc\u3082\u5165\u308c\u3066\u307e\u3059\u3002\u306a\u304a\u3001\u9805\u76ee\u306e\u8a2d\u5b9a\u306fw2ui\u306e\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3092\u898b\u306a\u304c\u3089\u8abf\u6574\u3057\u3066\u3044\u304d\u307e\u3059\u304c\u3001\u7d50\u69cb\u878d\u901a\u304c\u5229\u304d\u307e\u3059\u306d\u3002 <\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\" \/>\r\n<title>Customer API Tool<\/title>\r\n<script src=\"javascript\/jquery-3.4.1.min.js\"><\/script>\r\n<script type=\"text\/javascript\" src=\"javascript\/w2ui-1.5.rc1.min.js\"><\/script>\r\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/w2ui-1.5.rc1.min.css\" \/>\r\n<\/head>\r\n<body>\r\n<div id=\"toolbar\" style=\"padding: 4px; border: 1px solid #dfdfdf; border-radius: 3px\"><\/div>\r\n<div id=\"data-grid\" style=\"width: 100%; height: 500px;\"><\/div>\r\n<div id=\"data-form\" style=\"width: 100%; height: 350px;\"><\/div>\r\n<script type=\"text\/javascript\">\r\n\/\/w2ui-tablemaintenance.js \u30b0\u30ea\u30c3\u30c9\u8a2d\u5b9a\r\nvar uiName = \"\u9867\u5ba2\u8a2d\u5b9a\";  \/\/ \u753b\u9762\u8868\u793a\u540d\r\nvar gridURL = location.href + 'customers';  \/\/\u30b0\u30ea\u30c3\u30c9\u8868\u793a\u30c7\u30fc\u30bf\u53d6\u5f97URL\r\nvar gridColumns = [  \/\/ \u30b0\u30ea\u30c3\u30c9\u9805\u76ee\r\n                   { field: 'customerid', caption: '\u9867\u5ba2ID', size: '35%' ,sortable: true, info: true},\r\n                   { field: 'customerCode', caption: '\u9867\u5ba2\u5951\u7d04CD', size: '35%' ,sortable: true},\r\n                   { field: 'customerName', caption: '\u9867\u5ba2\u540d ', size: '130%' ,sortable: true},\r\n                   { field: 'apiUrl', caption: 'API URL', size: '100%' ,sortable: true},\r\n                   { field: 'user', caption: '\u30e6\u30fc\u30b6\u30fcID', size: '50%' ,sortable: true},\r\n                   { field: 'password', caption: '\u30d1\u30b9\u30ef\u30fc\u30c9', size: '40%', render: 'password', sortable: true},\r\n                   { field: 'mailadr', caption: '\u901a\u77e5\u5148\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9', size: '100%' ,sortable: true},\r\n                   { field: 'insdate', caption: '\u4f5c\u6210\u65e5\u6642', size: '60%' ,sortable: true},\r\n                   { field: 'updddate', caption: '\u66f4\u65b0\u65e5\u6642', size: '60%' ,sortable: true},\r\n                   ];  \r\n\r\n\/\/w2ui-tablemaintenance.js \u30d5\u30a9\u30fc\u30e0\u8a2d\u5b9a\r\nvar formURL = location.href + 'customers';  \/\/\u30d5\u30a9\u30fc\u30e0\u66f4\u65b0URL\r\nvar formColumns = [ \/\/\u30d5\u30a9\u30fc\u30e0\u9805\u76ee\r\n                   { field: 'customerid', type: 'text', required: true, html:{caption: '\u9867\u5ba2ID', attr: 'size=5 maxlength=4'}},\r\n                   { field: 'customerCode', type: 'text', required: true, html:{caption: '\u9867\u5ba2\u5951\u7d04CD', attr: 'size=10 maxlengh=8'}},\r\n                   { field: 'customerName', type: 'text', required: true, html:{caption: '\u9867\u5ba2\u540d', attr: 'size=60 maxlengh=60' }},\r\n                   { field: 'apiUrl', type: 'text', required: true, html:{caption: 'API URL', attr: 'size=60 maxlengh=60' }},\r\n                   { field: 'user', caption: 'login ID', type: 'text', required: true, html:{caption: 'login ID', attr: 'size=20 maxlengh=20' }},\r\n                   { field: 'password', caption: 'password', type: 'password', required: true, html:{caption: 'password', attr: 'size=20 maxlengh=20' }},\r\n                   { field: 'mailadr', caption: '\u901a\u77e5\u5148\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9', size: '100%' ,sortable: true, html:{caption: '\u901a\u77e5\u5148\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9', attr: 'size=40 maxlengh=40' }},\r\n                   ];\r\n\r\n\/\/\u30c4\u30fc\u30eb\u30d0\u30fc\r\n$('#toolbar').w2toolbar({\r\n    name: 'toolbar',\r\n    tooltip: 'right',\r\n    items: [{ type: 'break' },{ type: 'html', html: '<strong><font color=\"red\">Customer API Tool<\/font><\/strong>'},\r\n        { type: 'button', id: 'customerBT', group: '1',text: '\u9867\u5ba2\u8a2d\u5b9a', icon: 'fa-wrench', tooltip: '\u9867\u5ba2\u8a2d\u5b9a\u3092\u53c2\u7167\u30fb\u7de8\u96c6\u3057\u307e\u3059',\r\n        \tonClick: function (event) { showGrid();}},\r\n        { type: 'break' },\r\n    ]\r\n});\r\n\r\n$(document).ready(function(){\r\n\tshowGrid();\r\n});\r\n\r\n<\/script>\r\n<script type=\"text\/javascript\" src=\"javascript\/w2ui-tablemaintenance.js\"><\/script>\r\n<\/body>\r\n<\/html><\/pre>\n
\u6700\u5f8c\u306b\u3068\u3044\u3046\u304b\u3001\u672c\u6765\u306a\u3089\u6700\u521d\u306b\u3067\u3059\u304cSpringBoot\u5074\u306f\u3001w2ui\u306e\u9805\u76ee\u540d\u3068\u4e00\u81f4\u3059\u308b\u30a8\u30f3\u30c6\u30a3\u30c6\u30a3\u30af\u30e9\u30b9\uff08\u3053\u3053\u3067\u306fCustomer\uff09\u3068\u3001CrudRepository\u3092\u7d99\u627f\u3057\u305f\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30fc\u30b9CustomerRepository\u3092\u7528\u610f\u3057\u3001REST\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u304b\u3089\u30a2\u30af\u30bb\u30b9\u3055\u305b\u308b\u3088\u3046\u306b\u3057\u307e\u3059\u3002<\/p>\n
@CrossOrigin\r\n@RestController\r\npublic class CustomerController {\r\n\tprivate CustomerRepository repository;\r\n\t\r\n\t@Autowired\r\n    public CustomerController(CustomerRepository repository) {\r\n        this.repository = repository;\r\n    }\r\n\t\/**\r\n\t * \u9867\u5ba2\u60c5\u5831\u53d6\u5f97\r\n\t * *\/\r\n\t@RequestMapping(value=\"\/customers\",method = RequestMethod.GET)\r\n    private String getCustomers() throws Exception{\r\n\t\t\r\n\t\tObjectMapper jsonMapper = new ObjectMapper();\r\n\t\tList<Customer> list = new ArrayList<>();\r\n\t\tStreamSupport.stream(Spliterators.spliteratorUnknownSize(repository.findAll().iterator(), 0),false).forEach(o -> list.add(o));\r\n\t\treturn jsonMapper.writeValueAsString(list);\r\n\t}\r\n\t\/**\r\n\t * \u9867\u5ba2\u60c5\u5831\u53d6\u5f97\r\n\t * @param id customer id\r\n\t * *\/\r\n\t@RequestMapping(value=\"\/customers\/{id}\",method = RequestMethod.GET)\r\n    private String getCustomers(@PathVariable(name = \"id\", required = false) String id\r\n    \t\t) throws Exception{\r\n\t\tObjectMapper jsonMapper = new ObjectMapper();\r\n\t\t\r\n\t\treturn jsonMapper.writeValueAsString(repository.findById(id));\r\n\t}\r\n\t\/**\r\n\t * \u9867\u5ba2\u60c5\u5831\u66f4\u65b0\r\n\t * *\/\r\n\t@RequestMapping(value=\"\/customers\",method = RequestMethod.POST)\r\n\tprivate Customer \uff53etCustomers(@RequestBody Customer customer) throws Exception{\r\n\t\tif(customer.getInsdate()== null){\r\n\t\t\tcustomer.setInsdate(LocalDateTime.now().format(DateTimeFormatter.ofPattern(\"yyyy-MM-dd HH:mm:ss\")));\r\n\t\t}\r\n\t\tcustomer.setUpdddate(LocalDateTime.now().format(DateTimeFormatter.ofPattern(\"yyyy-MM-dd HH:mm:ss\")));\r\n\t\treturn repository.save(customer);\r\n\t}\r\n\t\/**\r\n\t * \u9867\u5ba2\u60c5\u5831\u524a\u9664\r\n\t * *\/\r\n\t@RequestMapping(value=\"\/customers\",method = RequestMethod.DELETE)\r\n    private String deleteCustomers(@RequestBody Customer customer) throws Exception{\r\n\t\trepository.deleteById(customer.getCustomerid());\r\n\t\treturn customer.getCustomerid();\r\n\t}\r\n}\r\n<\/pre>\n
\u3067\u3001\u51fa\u6765\u305f\u753b\u9762\u3067\u3059\u3002<\/p>\n
\"\"<\/a><\/p>\n
\"\"<\/a><\/p>\n
\u306a\u304a\u3001\u4eca\u56de\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u8981\u4ef6\u306f\u8003\u616e\u3057\u3066\u3044\u307e\u305b\u3093\u3002\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
SpringBoot\u3067\u4f5c\u3063\u3066\u3044\u308b\u30a2\u30d7\u30ea\u306b\u3001\u30c6\u30fc\u30d6\u30eb\u30e1\u30f3\u30c6\u30ca\u30f3\u30b9\u753b\u9762\u304c\u5fc5\u8981\u306b\u306a\u3063\u305f … \u7d9a\u304d\u3092\u8aad\u3080 →<\/span><\/a><\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,17],"tags":[],"_links":{"self":[{"href":"https:\/\/esoro.jp\/index.php?rest_route=\/wp\/v2\/posts\/1651"}],"collection":[{"href":"https:\/\/esoro.jp\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/esoro.jp\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/esoro.jp\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/esoro.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1651"}],"version-history":[{"count":0,"href":"https:\/\/esoro.jp\/index.php?rest_route=\/wp\/v2\/posts\/1651\/revisions"}],"wp:attachment":[{"href":"https:\/\/esoro.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1651"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/esoro.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1651"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/esoro.jp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1651"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}