miniui datagrid 创建表格

最新推荐文章于 2025-05-21 00:37:06 发布

啉涩爻姬

最新推荐文章于 2025-05-21 00:37:06 发布

阅读量6.5k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/u013089446/article/details/77644155

js 同时被 3 个专栏收录

6 篇文章

订阅专栏

html

2 篇文章

订阅专栏

miniui

2 篇文章

订阅专栏

本文介绍如何使用 HTML 和 MiniUI 库实现 DataGrid 组件，包括两种方式：直接在 HTML 中定义 DataGrid 结构和通过 JavaScript 动态配置 DataGrid 的属性。文中详细展示了 DataGrid 的各项功能设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

（1）html中创建

  <div id="YourGridId" class="mini-datagrid"
                     url="@Url.Content("YourActionUrl")"
                     ajaxtype="post"
                     showpager="false"
                     showloading="true"
                     showmodified="false"
                     allowcelledit="true"
                     allowalternating="true"
                     allowcellselect="true"
                     multiselect="true"
                     allowrowselect="true"
                     allowmovecolumn="false"
                     style="height: 100%; width: 100%">
                    <div property="columns">
                        <div type="indexcolumn" width="20"></div>
                        <div header="关键词" headeralign="center">
                            <div property="columns">
                                <div name="name1" field="name1" headeralign="center" align="left" width="150" autoescape="true">
                                    1
                                </div>
                                <div name="name2" field="name2" align="left" width="150" headeralign="center" autoescape="true">
                                    2
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

相关js代码如下

$(function() {
        mini.parse();
        InitMedcondGrid(); 
    });
///初始化列表内容
function InitMedcondGrid  () {
    var grid = mini.get(“YourGridId”);
    grid.load();
}

(2)在js中设置datagrid

html:

 <div id="YourGridId" class="mini-datagrid" style="height: 100%; width: 100%;"></div>

js:

$(function() {
        mini.parse();
        InitMedcondGrid(); 
    });

function DrugDataGridInt () {
    var columns = [
        { type: "indexcolumn" },
        { field: 'id', header: '编号', width: 50, align: 'left', visible: false },

        { field: 'code', header: '编码', width: 120, headerAlign: 'center',autoescape:true },
        { field: 'name', header: '名称', width: 200, headerAlign: 'center', autoescape: true }
    ];

    var grid = mini.get("YourGridId"); 
    grid.set({
        url: YourUrl,
        sizeList: [50,100],
        pageSize: 50,
        columns: columns,
        allowAlternating: true, //显示间行色
        multiSelect: true,
        fitColumns: false, //使用过滤行必须设定这个全充满，否则会有列对齐问题。
        allowCellEdit: true,
        allowCellSelect: true, 
        showFilterRow: false,
        showModified: false,
        allowMoveColumn: false);
    grid.load(); 
}