个人知识网

jQuery UI Widgets

策划还是比较喜欢原来的类似表格来编辑，不喜欢直接编辑json格式。

在网上找到了jqwidgets，里面的grid控件正好满足需求。

<script type="text/javascript">
        $(document).ready(function () {
        	var url='<c:url value='/gm/Gm/readParameter?id=${parameter.id}'/>';
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'id', type: 'int' },
                    { name: 'name', type: 'string' },
                    { name: 'gmLoginUrl', type: 'string' },
                    { name: 'ip', type: 'string' },
                    { name: 'port', type: 'int' },
                    { name: 'status', type: 'int' },
                    { name: 'recommend', type: 'bool' }
                ],
                id: 'id',
                url: url
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                width: 1200,
                source: dataAdapter,
                columnsresize: true,
                editable: true,
                columns: [
                  { text: 'id', datafield: 'id', width: 50 },
                  { text: 'name', datafield: 'name', width: 150 },
                  { text: 'ip', datafield: 'ip', width: 120 },
                  { text: 'port', datafield: 'port', minwidth: 120 },
                  { text: '状态', datafield: 'status', minwidth: 50 },
                  { text: '推荐', datafield: 'recommend', maxwidth: 50,columntype: 'checkbox' },
                  { text: '后台连接', datafield: 'gmLoginUrl', width: 280 }
                ]
            });
            $("#jsonExport").jqxButton({});
            $("#jsonExport").click(function () {
                var gridContent=$("#jqxgrid").jqxGrid('exportdata', 'json');
                $("#editParameterForm_json").val(gridContent);
                $("#editParameterForm").submit();
            });
        });</script>

在使用grid导出json时，数字被3个一组分组了，12345被格式化为 12,345 生成后面一堆错误。

最终未找到的完美的解决方式，只好设置这一列为字符串，避免被分组。