dhtmlx——疑难杂症总结

最新推荐文章于 2025-04-01 16:41:47 发布

七的不是海

最新推荐文章于 2025-04-01 16:41:47 发布

阅读量475

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_50478033/article/details/126569679

版权

本文介绍如何使用 dhtmlXGrid 实现动态加载下拉框数据、组合框数据，以及如何进行全选操作、刷新父页面、添加行、设置分页等实用功能。

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

1、dhtmlxgrid的列类型setColTypes为combo时动态加载下拉框数据

var myGrid = new dhtmlXGridObject('gridbox');
myGrid.init();
//列类型：combo   ——放在init初始化之后——下拉框可模糊查询
var combo = myGrid.getColumnCombo(3);//第几列
$.ajax({
    url: "../controler/function",
    type: "POST",
    async: false,
    success: function (res) {
        if (res.Result == 10) {
            var json = JSON.parse(res.Data);
            for (var j in json) {
                //使用addOption方法添加元素，value为ID，text为显示的值
                combo.addOption(json[j]["VALUE"], json[j]["TEXT"]);
            }
         }
    }
});

2、dhtmlxgrid的列类型setColTypes为coro时动态加载数据

//列类型：coro   ——放在init初始化之前——下拉框不可模糊查询
var myGrid = new dhtmlXGridObject('gridbox');
var combobox = myGrid.getCombo(3);//第几列
$.ajax({
    url: "../con/fun",
    type: "POST",
    async: false,
    success: function (res) {
        if (res.Result == 10) {
            var json = JSON.parse(res.Data);
            for (var j in json) {
                //使用put方法添加元素，value为ID，text为显示的值
                combobox.put(json[j]["VALUE"], json[j]["TEXT"]);
            }
        }
    }
});
myGrid.init();

3、dhtmlxgrid的勾选框实现全选和取消全选

//全部勾选
$("#btnSelectAll").click(function () {
    myGrid.forEachRow(function (rowId) {
        myGrid.cells(rowId, 0).setValue(1);
    });
});

//取消全部勾选
$("#btnSelectNotAll").click(function () {
    myGrid.forEachRow(function (rowId) {
        myGrid.cells(rowId, 0).setValue(0);
    });
});

4、刷新父页面，关闭子页面

window.top.index.alert_warning("系统提示", "完成", "确定", null);//在子页面上弹框
window.parent[0].doOnLoad();//根据子页面取父页面，并调用方法
window.top.index.CloseWin("TrnsSend");//根据子页面ID关闭子页面

5、MyGrid添加行，不清除之前数据

$.ajax({
    type: "post",
    url: "../con/fun",
    data: { "box_no": $("#input_box_no").val() },
    datatype: "json",
    success: function (result) {   
        //Json(gridData, JsonRequestBehavior.AllowGet)
        //var varJson = $.parseJSON(result);                           
        //ReturnAjaxResult(operateResult.Status, operateResult.Message)
        console.log(result.data);
        $.each(result.data, function (i, val) {
            myGrid.addRow(myGrid.getRowsNum() + 1, [
                ,
                val["ID"],
            ]);
        });
     }
});

6、dhtmlxgrid中的分页栏设置

mygrid.i18n.paging={
      results:"Results",
      records:"Records from ",
      to:" to ",
      page:"Page ",
      perpage:"rows per page",
      first:"To first Page",
      previous:"Previous Page",
      found:"Found records",
      next:"Next Page",
      last:"To last Page",
      of:" of ",
      notfound:"No Records Found" 
};
mygrid.enablePaging(true,15,5,"pagingbox",true);
mygrid.setPagingSkin("bricks");
mygrid.init();