Jqgrid自定义edittype custom_element事件未触发

时间:2012-10-17 17:46:04

标签: javascript jquery jqgrid

<script src="jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="grid.locale-en.js" type="text/javascript"></script>
    <script src="jquery.jqGrid.min.js" type="text/javascript"></script>
   <script type="text/javascript">    
    function myelem(value, options) {
            alert('1'); 
            var el = document.createElement("input");
            el.type = "radio";
            if (value == "0")
                el.checked = false;
            else
                e1.checked = true;
            return el;
        }

        function myvalue(elem, operation, value) {
            if(operation === 'get') {
               return $(elem).find("input").val();
            } else if(operation === 'set') {
               $('input',elem).val(value);
            }
       }

       function FailGrdTranHistory() {
           alert('Function Execution Failed...');
       }
       function successSubGridFunction(jsondata) {
           HideCommentHeader();
           var thegrid = jQuery("#" + SubGridTableName)[0];
           var jdata = jsondata.d; //.split("~");
           thegrid.addJSONData(JSON.parse(jdata));
           unblockPage();
       }

        jQuery(document).ready(function () {
            jQuery("#jqGrid1").jqGrid({
                datatype: "local",
                height: 250,
                colNames: ['Inv No', 'From','Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
                colModel: [
                    { name: 'id', index: 'id', width: 60, sorttype: "int" },
                    {name: 'from',width:60,editable: true,edittype: 'custom',editoptions: {custom_element: myelem, custom_value:myvalue}},
                    { name: 'invdate', index: 'invdate', width: 90, sorttype: "date" },
                    { name: 'name', index: 'name', width: 100 },
                    { name: 'amount', index: 'amount', width: 80, align: "right", sorttype: "float" },
                    { name: 'tax', index: 'tax', width: 80, align: "right", sorttype: "float" },
                    { name: 'total', index: 'total', width: 80, align: "right", sorttype: "float" },
                    { name: 'note', index: 'note', width: 150, sortable: false }
                ],
                pager: '#pager',
                rowNum: 10,
                rowList: [10, 20, 30],
                sortname: 'id',
                sortorder: 'desc',
                viewrecords: true,
                imgpath: "lib/basic/images",
                caption: "Manipulating Array Data"
            });

        var mydata = [
            { id: "1",from: "0" , invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
            { id: "2",from: "1", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
            { id: "3",from: "0", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
            { id: "4",from: "1", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
            { id: "5",from: "1", invdate: "2007-10-05", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
            { id: "6",from: "1", invdate: "2007-09-06", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
            { id: "7",from: "1", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
            { id: "8",from: "1", invdate: "2007-10-03", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
            { id: "9",from: "0", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }
        ];
        for (var i = 0; i <= mydata.length; i++) {
                jQuery("#jqGrid1").jqGrid('addRowData', i + 1, mydata[i]);
            }
        });
     </script>

我试图做的是在名为'from in the jqgrid。'的列中显示一个单选按钮。

'from'列有edittype ='custom'但仍然显示文字而不是预期的广播 按钮。

另外我知道绑定到custom_element属性的myelem函数没有触发,因为我在运行包含jqgrid的页面时没有看到警报弹出。

我使用的脚本文件位于此网址https://docs.google.com/folder/d/0BxqMgWIbBHEFVnJDUmtUYUxKeWc/edit

1 个答案:

答案 0 :(得分:0)

这样问题似乎没有得到解答,我正在添加我的解决方案。对于该列,我使用了以下代码:

{
    name: 'Test',
    index: 'Test',
    width: '63px',
    sortable: false,
    edittype: 'custom',
    formatter: function (cellvalue, options, rowObject) {
        return '<input type="radio" name="selectedCall" value="' + cellvalue + '"' + '/>'
    }
}