javascript - 将变量传递给另一个函数(easyui)

Question

你好，我一直在拼命尝试在函数之间传递变量，我尝试了一些解决方案，但它们不起作用 - 也许我做错了。我不知道如何解决这个问题，这对你们中的一些人来说可能微不足道，期待帮助。

它是如何工作的:输入单选按钮应该在 url 中添加一个参数(queryParams - 根据文档，一切都应该没问题)，我将其称为用于显示指定数据的附加过滤器。当您单击单选脚本时，会获取该值并将其附加到 queryParams。

如果您有更多问题，请随时提问。

<div class="adv_filter">
    <li>
        <input type="radio" name="letter_type" data-custom="Radio1" value="0">Radio1</li>
    <li>
        <input type="radio" name="letter_type" data-custom="Radio2" value="1" checked="checked">Radio2</li>
    <li>
        <input type="radio" name="letter_type" data-custom="Radio3" value="2">Radio3</li>
</div>

$("li").on("click", "input", function () {
    $('#dg').datagrid('reload'); //reloads the grid
    alert($(this).val()); //gets the value of input type radio
    globalVar = $(this).val(); //assign the value to a global variable
    $('#string').html(globalVar);
});

$('#dg').datagrid({

    url: 'data_loader.php',
    queryParams: { //this adds to the url ?ltype=valur
        ltype: globalVar //assign the global variable here
    }
});
//$('#string2').html(globalVar);

JSFiddle example .

Answer 1

一种解决方案是再次调用 .datagrid。

$("li").on("click", "input", function () {
    var val = $(this).val();
    $('#string').html(val);
    updateDataGrid(val);
});

updateDataGrid();   // this initial call may or may not be needed. 
                    // if the grid should load something on start up
                    // then pass a parameter to it here.

function updateDataGrid(query) {
    $('#dg').datagrid({

        url: 'data_loader.php',
        queryParams: { 
            ltype: query 
        }
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<link href="http://www.jeasyui.com/easyui/themes/default/easyui.css" rel="stylesheet"/>

<hr>Filter
<hr>
<div class="adv_filter">
    <li>
        <input type="radio" name="letter_type" data-custom="Radio1" value="0">Radio1</li>
    <li>
        <input type="radio" name="letter_type" data-custom="Radio2" value="1" checked="checked">Radio2</li>
    <li>
        <input type="radio" name="letter_type" data-custom="Radio3" value="2">Radio3</li>
</div>
<hr>
<table class="easyui-datagrid" id="dg" title="Basic DataGrid" style="width:700px;height:250px" data-options="singleSelect:true,collapsible:true">
    <thead>
        <tr>
            <th data-options="field:'itemid',width:80">Item ID</th>
            <th data-options="field:'productid',width:100">Product</th>
            <th data-options="field:'listprice',width:80,align:'right'">List Price</th>
            <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
            <th data-options="field:'attr1',width:250">Attribute</th>
            <th data-options="field:'status',width:60,align:'center'">Status</th>
        </tr>
    </thead>
</table>
<hr>
<!-- debug -->inside
<div id="string"></div>
<hr>outer
<div id="string2"></div>