jquery miniUi使用小结

这几天用miniUi 做了点东西,感觉挺好使的,顺便记录下,方便下次使用。

1:获取选中行: var row = grid.getSelected();
2:获取多行:var rows = grid.getSelecteds();
3:行操作:
  <div name="action" width="120" headerAlign="center" align="center" renderer="onActionRenderer" cellStyle="padding:0;">操作</div>
function onActionRenderer(e) {
            var grid = e.sender;
            var record = e.record;
            var uid = record._uid;
            var rowIndex = e.rowIndex;
            var s = 
            ' <a class="Edit_Button" href="javascript:editRow(\'' + uid + '\')" >字段编辑</a>' +
            ' <a class="Edit_Button" href="javascript:conditRow(\'' + uid + '\')" >条件编辑</a>'+
            ' <a class="Edit_Button" href="javascript:showRow(\'' + uid + '\')" >查看星形模型</a>'
             ;
            return s;
        }
 //查看星形模型
        function showRow(row_uid) {
  //根据UID获取行
            var row = grid.getRowByUID(row_uid);
             window.open("/pisa/drawGraph/StartModel.jsp?modelId="+row.tblCode);
        }

4:打开子窗口:
function conditRow(row_uid) {
            var row = grid.getRowByUID(row_uid);
              mini.open({
                     url: "conditEdit.action",
                     title: "条件编辑", width: 1000, height: 500,
                     onload: function () {
                         var iframe = this.getIFrameEl();
    //父窗口向子窗口传值;
                         var data = { action: "edit", tblCode: row.tblCode,tblName: row.tblName,sysCode:row.SYSCODE};
                         iframe.contentWindow.SetData(data);
                        
                     },
                     ondestroy: function (action) {
                         grid.reload();
                        
                     }
                 });
        }
子窗口接收参数,使用统一接口:
//标准接口
         function SetData(data) {
            if (data.action == "edit") {
                //跨页面传递的数据对象,克隆后才可以安全使用
                data = mini.clone(data);
              $("#tblCode").val(data.tblCode);
              $("#tblName").val(data.tblName);
              $("#sysCode").val(data.sysCode);
              grid.load({tblCode:data.tblCode});
            }
        }
5:grid列表查询
function search() {
            var tblCode = mini.get("tblCode").getValue();
            var tblName = mini.get("tblName").getValue();
            grid.load({ tblCode: tblCode,tblName:tblName });
        }

        function onKeyEnter(e) {
            search();
        }
6:oncellcommitedit="OnCellCommitEdit" 单元格编辑后执行的操作

function OnCellCommitEdit(e) {
            var grid = e.sender;
            var record = e.record;
            var field = e.field, value = e.value;
             var uid = record._uid;
              var row = grid.getRowByUID(uid);
           if(field=="isString"){
                    if (value == "T") {
                     grid.updateRow(record, { isDim: "T", isDim_name: "维度" });
              }else{
                      grid.updateRow(record, { isDim: "F", isDim_name: "度量" });
              }
                }
                if(field=="isDim"){
                    if (value == "T") {
                     grid.updateRow(record, { isString: "T", isString_name: "是" });
              }else{
                      grid.updateRow(record, { isString: "F", isString_name: "否" });
              }
                }
 

 

  • 2
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用 jQuery MiniUI 实现 mini-combox 跨页多选,可以按照以下步骤进行: 1. 引入 jQueryMiniUI 的相关文件: ```html <script src="jquery.min.js"></script> <script src="miniui/miniui.js"></script> <link href="miniui/themes/default/miniui.css" rel="stylesheet" /> <link href="miniui/themes/icons.css" rel="stylesheet" /> ``` 2. 创建 mini-combox 组件并设置相关属性: ```html <input id="myCombox" name="myCombox" class="mini-combobox" value="" showNullItem="true" popupWidth="250" onvaluechanged="onValueChanged" /> ``` 其中,`onvaluechanged` 属性绑定了一个回调函数,用于在用户选择选项后更新选择结果。 3. 在 JavaScript 中初始化 mini-combox 组件并设置数据源: ```javascript $(function() { var myCombox = mini.get("myCombox"); myCombox.setData([{ id: 1, text: "选项1" }, { id: 2, text: "选项2" }, { id: 3, text: "选项3" }, { id: 4, text: "选项4" }, { id: 5, text: "选项5" }, { id: 6, text: "选项6" }, { id: 7, text: "选项7" }, { id: 8, text: "选项8" }, { id: 9, text: "选项9" }, { id: 10, text: "选项10" }]); }); ``` 其中,`setData` 方法用于设置 mini-combox 的数据源。 4. 实现多页加载和多选功能: ```javascript var pageSize = 5; // 每页显示的选项数 var selectedItems = []; // 保存用户选择的选项 function onValueChanged(e) { // 当用户选择一个选项时触发 var item = e.selected; if (item) { // 如果选项还没有被选择过,则添加到选择结果列表中 if ($.inArray(item.id, selectedItems) == -1) { selectedItems.push(item.id); } } else { // 如果选项已经被选择过,则从选择结果列表中移除 var index = $.inArray(e.value, selectedItems); if (index >= 0) { selectedItems.splice(index, 1); } } } function loadPage(pageIndex) { // 加载指定页的选项并更新 mini-combox 的数据源 var start = pageIndex * pageSize; var end = start + pageSize; var data = [{ id: -1, text: "全部" }].concat(selectedItems.map(function(id) { return { id: id, text: "选项" + id }; })).concat(myData.slice(start, end)); var myCombox = mini.get("myCombox"); myCombox.setData(data); } $(function() { var myData = [{ id: 1, text: "选项1" }, { id: 2, text: "选项2" }, { id: 3, text: "选项3" }, { id: 4, text: "选项4" }, { id: 5, text: "选项5" }, { id: 6, text: "选项6" }, { id: 7, text: "选项7" }, { id: 8, text: "选项8" }, { id: 9, text: "选项9" }, { id: 10, text: "选项10" }]; // 初始化 mini-combox 组件 var myCombox = mini.get("myCombox"); myCombox.set({ pageSize: pageSize, onbeforeload: function(e) { var pageIndex = e.pageIndex; loadPage(pageIndex); e.cancel = true; // 取消默认的数据加载方式 } }); loadPage(0); }); ``` 其中,`loadPage` 方法用于加载指定页的选项并更新 mini-combox 的数据源。`selectedItems` 数组保存用户选择的选项,其中的元素为选项的 ID。在 `onValueChanged` 回调函数中,每当用户选择或取消一个选项时,都会更新 `selectedItems` 数组,并调用 `loadPage` 方法重新加载 mini-combox 的数据源。同时,为了实现多选功能,需要在每个选项前面添加一个复选框,并在选择结果列表中保存用户选择的所有选项。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值