EasyUI应用之 datagrid与menubutton结合

EasyUI应用之 datagrid与menubutton结合

    最近在做一个项目，需要使用EasyUI的datagrid将数据显示出来，并且需要对这些记录进行各类操作，如：普遍的只读()，编辑()，删除()，列印()，加料的签收()，提交(),接受()，拒绝()等。就这么8项操作就已经占据了8＊60px的珍贵宽度（如图一所示），如果一行记录太宽，要用户拖动滚动条进行操作的话，那么用户体验感受一定不好，那么有什么方案可供选择呢？其中方案之一就是，将这8项操作放在menubutton上，鼠标移到上面才出现下拉菜单进行操作（如图二所示）。这样一来节省了位置，二来显得清晰美观多了。

（图一）

 

（图二）

 

    好了，废话不多说，上代码。

1、前端网页代码，设置EasyUI的datagrid：

<tableid="tt"class="easyui-datagrid"style="width:700px;height:500px;font-size:xx-large " url="../JsonData/WebForm1Data.aspx"singleSelect="true"rownumbers="true">

        <thead>

                <tr>                               

                        <th field="action"width="80"align="centor" formatter="InputAction">操作</th>

           <thfield="Field1"width="200 "align="centor">Field1</th>

                        <th field="Field2"width="80"align="centor">Field2</th>

                        <th field="Field3"width="80"align="centor">Field3</th>                               

                </tr>

        </thead>

</table>

重点：formatter="InputAction"使用InputAction函数对［操作］栏位格式化。

2、InputAction Function:

        function InputAction(value, row, index) {

            return'<a href="javascript:void(0)" id="mb' + index + '" class="easyui-menubutton" menu="#mm3" iconCls="icon-edit" οnmοuseοver="ShowMenu(' + index + ')">'+this.title+'</a>';            

        }

重点：1、添加的<div>要命名id：id="mb' + index + '"。2、为其加上onmouseover 事件的Function，以便按下菜单时能响应不同列的事件。

3、ShowMenu Function

        function ShowMenu(key) {

            $('#mm3').menu({

                onClick: function (item) {

                    if (item.id != undefined && eval(item.id) != undefined && $.isFunction(eval(item.id))) {

                        item.onclick = eval(item.id + "(" + key + ")");

                    }

                }

            });

        }

4、菜单item响应Click事件Function:

        function menuModify(key) {

            alert("menuModify");

            alert(key);

        }

 

        function menuRead(key) {

            alert("menuReady");

            alert(key);

        }

重点：Function名要与menubutton的菜单项id一致

5、前端网页代码，设置EasyUI的menubutton菜单项：

<divid="mm3"class="easyui-menu"style="width:120px;">  

    <div  iconCls="icon-save"  id="menuModify">编辑</div>  

    <divid="menuRead">只读</div>

    <divid="Div7">列印</div>

    <divid="Div8">删除</div>

    <divclass="menu-sep"></div>

    <divid="Div9">签收</div>

    <divid="Div10">提交</div>

    <divid="Div11">接受</div>

    <divid="Div12">拒绝</div>

</div>

OK，运行效果如图：

 

    咦？怎么不是menubutton的效果？怎么只是超连接，而且鼠标放上去也没有反应的？
    哦，原来我们忘了在datagrid成功载入数据后对通过InputAction Function加上去的<div>进行一次menubutton效果的生成。代码如下：

       $(function () {

            $('#tt').datagrid({

                onLoadSuccess: function (data) {

                    for (i = 0; i < $('#tt').datagrid('getRows').length; i++) {        

                        $('#mb' + i).menubutton();

                    }

                }

            });

OK，这样运行后的效果就如图二所示的效果一样了！

 

总结知识点：

1、［对象］.[事件]＝function(){}:为对象的事件绑定Function，如Function是动态的，则可用eval(FunctionName)。

2、在datagrid成功载入数据后对动态添加的EasyUI控件进行一次相应控件的效果生成。

3、datagrid可通过formatter 属性来自定义各类超Cool的效果。

转载于:https://www.cnblogs.com/DinoFung/archive/2012/04/14/2447464.html