JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.3/css/ui.jqgrid.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.3/jquery.jqgrid.min.js"></script>

<div id="CTF8010-acms-list"></div>
<div id="CTF8010-acms-list-pager"></div>

JavaScript

//GRID SYS//
        //CTF8010-acms-list
        //var tempdata = '@Json.Encode(Model.acmsList)';
        alert('@Model.acmsListSTR');
        var tempdata = $('<div>').html('@Model.acmsListSTR')[0].textContent;//TODO: not really a best method maybe..//
        alert(tempdata);
		
		alert(document.documentMode);
		
        tempdata = JSON.parse(tempdata);
        alert(tempdata);
        //var data = $('<div>').html('@Json.Encode(Model.acmsList)')[0].textContent;
        //colModel: [
        //    { name: "ACID", sortable: true, editable: true, edittype: 'text' },
        //    { name: "ACNM", sortable: true, editable: true, edittype: 'text' },
        //    { name: "ENNM" }
        //],
        $("#CTF8010-acms-list").jqGrid({
            //url:'@Url.Action("GetList","AC")',
            //mtype: 'GET',
            //datatype: 'json',
            data:tempdata,
            colNames: ['科目代號', '中文名稱', '英文名稱', '類別', '借貸', '性質', '計畫','性質+計畫'],
            colModel: [
                { name: "ACID", sortable: true, editable: false, width: '57px' },
                { name: "ACNM", sortable: true, editable: true, edittype: 'text' ,width: '330px' },
                { name: "ENNM", sortable: true, editable: true, edittype: 'text' ,width: '420px' },
                { name: "KIND", sortable: true, editable: true, edittype: 'select', formatter: "select", editoptions: { value: "1:資產;2:負債;3:資本;4:收入;5:費用", defaultValue: "1" } ,width: '53px' },
                { name: "LOAN", sortable: true, editable: true, edittype: 'select',formatter: "select",editoptions:{value:"D:D;C:C", defaultValue: "D"} ,width: '53px' },
                { name: "PJKD", sortable: true, editable: true, edittype: 'select', formatter: "select", editoptions:{value:"Y:Y;N:N", defaultValue: "N"} ,width: '53px' },
                { name: "SBKD", sortable: true, editable: true, edittype: 'select',formatter: "select", editoptions:{value:"Y:Y;N:N", defaultValue: "N"} ,width: '53px' },
                { name:...