Jquery EasyUI使用总结（一）

最新推荐文章于 2025-09-04 18:55:33 发布

转载最新推荐文章于 2025-09-04 18:55:33 发布 · 93 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhangpan1244/p/3449455.html

文章标签：

#javascript #ViewUI

本文提供了一篇关于如何在网页中使用Combogrid设置自定义分页组件的深入指南，重点讲解了如何实现分页功能以优化页面布局。文章还分享了一个实际案例，演示了如何通过Combogrid加载和展示数据，并通过分页组件实现数据的高效展示。

1，弹出Iframe,新窗口

//打开编辑页面要加载的数据
function ShowDialog(id, url, width, height, onLoadFunc) {
    $("#" + id).html("<iframe scrolling='auto' id='openXXXIframe_" + id + "' frameborder='0'  src='" + url + "' style='width:100%;height:100%;'></iframe>")
    $('#divAddOrEdit').window({
        width: width,
        height: height,
        modal: true,
        closed: false,
        iconCls: 'icon-save',
        onLoad: function () {
        }
    });
    $('#' + id).window('open');
}

2，下拉表格combogrid

//初始化科室列表
function InitDeptListChooseCombbox(id) {
    $('#' + id).combogrid({
        url: "../../AjaxCall/GetSystemManageDataHandler.ashx", //数据来源
        panelWidth: 250,
        idField: 'dept_code', //标识字段,主键
        textField: 'dept_name', //显示的字段  
        queryParams: { "currentlist": "deptlist" },
        showHeader: false,
        columns: [[
                    { title: "科室名称", field: 'dept_name', width: 150, sortable: true },
                    { title: '科室代码', field: 'dept_code', width: 50, align: 'left', sortable: true }
                ]],
        pagination: true, //是否分页  
        pageSize: 10, //每页显示的记录条数，默认为10  
        method: 'post'
    });
    var pager = $('#' + id).combogrid('grid').datagrid('getPager');
    pager.pagination({
        showPageList: false,
        showRefresh: false,
        displayMsg: "",
        beforePageText: "第",
        afterPageText: "页"
    });
}

在使用Combogrid的时候，我们着重需要了解如何设置（自定义）分页组件，这个是我们页面布局的很重要一部分。

转载于:https://www.cnblogs.com/zhangpan1244/p/3449455.html