easyui使用问题记录

一、<a>标签中onclick和javascript事件与grid的select事件执行的先后顺序

html:

<a href='javascript:func();' onclick='func2();'>处理</a>

script:

function func() {
    console.log('javascript->');
    console.log($("#grid").datagrid('getSelected'));
}
function func2() {
    console.log('onclick->');
    console.log($("#grid").datagrid('getSelected'));
}

结果：

处理事件执行顺序

onclick

select

javascript

 

二、queryParams:{},的作用

1、不加

function init() {
  $('#dg').datagrid({
    queryParams{},
    url:...,
    columns:[[
      ...
    ]]
  });
}

①初始化
init();

②带参数加载数据
$('#dg').datagrid('load', { param: 1 });

③初始化
init();

顺序执行到③时，请求会带上param=1

2、加上

顺序执行到③时，会冲掉②所加的参数param=1

 

三、datagrid初始化与加载

function a() {
　　$("#coreHspManDetailInfoSyncDoctorG").datagrid({
        title: '医院医生',
        columns: [[
            {field:'name',title:'姓名',width:100,align:'left',halign:'center'},
            {field:'dep_name',title:'科室',width:125,align:'left',halign:'center'}
        ]],
        fit: true,
        pagination: true,
        pageSize: 100,
        onLoadSuccess: function() {
            $(this).datagrid('getPager').pagination({ displayMsg: '' });
        }
    });
}

function b() {
　　$("#coreHspManDetailInfoSyncDoctorG").datagrid({
        url: _basePath+'/coreOM/coreHspMan/queryHspDoctor.html'
　　});
}

用a()初始化，然后用b()加载数据时，存在的问题是，页数会记住。

 

四、combogrid的disabled属性

<input type="text" id="coreScheMan_det_add_form_org_code" name="org_code"/>

function a() {
　　$('#coreScheMan_det_add_form_org_code').combogrid({
　　　　url: _basePath+'/coreOM/coreScheMan/queryHsp.html',    
　　　　idField: 'org_code',
　　　　textField: 'name',
　　　　required: true,
　　　　disabled: true,
　　　　mode: 'remote',
　　　　columns: [[
　　　　　　{field:'org_code',title:'编码',width:100},
　　　　　　{field:'name',title:'名称',width:200}
　　　　]],
　　　　panelWidth: 325
　　});
}

function b() {
    $('#coreScheMan_det_add_form_org_code').combogrid('disable');
}

使用a()时，用form的serialize()方法可以获取到org_code的值，使用b()后，获取不到，可以通过combogrid的getValue方法获取到。

 

五、appendRow后getRows

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic Tabs - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
</head>
<body>
    
    <div id="dg"></div>
    <a href="javascript:fun1();" class="easyui-linkbutton">按钮1</a>
    <a href="javascript:fun2();" class="easyui-linkbutton">按钮2</a>
        
<script>
    $("#dg").datagrid({
        data:{"rows":[{"name":"项目一","num":1,"price":10,"amount":0},{"name":"项目二","num":2,"price":20,"amount":1}]},
        columns:[[
            {field:'id1',title:'id1',align:'center',hidden:true},    
            {field:'id2',title:'id2',align:'center'},            
            {field:'name',title:'项目',align:'center'}, 
            {field:'num',title:'数量',align:'center'},    
            {field:'price',title:'价格',align:'center'},    
            {field:'amo',title:'费用',align:'center',
                formatter:function(value, row, index) {
                    return row.num * row.price;
                }
            }
        ]],
        singleSelect: true
    });
    function fun1() {
        var rows = $("#dg").datagrid('getRows');
        console.log(rows);
    }
    function fun2() {
        $("#dg").datagrid('appendRow', {
            id1 : 1,
            id2 : 2,
            name : '项目三',
            num : 3,
            price : 30,
            amo : 90
        });
    }
</script>
</body>
</html>

getRows方法获取到的行的field与columns中定义的无关，结果如下图所示。

 

posted @ 2016-10-26 10:17  PilgrimM  阅读(277)  评论(0)  编辑  收藏  举报